Как грамотно конвертировать все числа в строки и наоборот в js объектах?

Question

[Евгений]

У меня есть объект, который я передаю в форму(React Final Form). Когда я передаю число, потом в input его меняю на то же самое значение, то внутри формы он преобразуется в строку и форма считает, что значение изменилось, соответственно кнопка отправить становится активной.
Мне нужно конвертировать числа в строки для всех полей объекта когда данные отправляются в форму и наоборот, когда они возвращаются из формы. Есть ли какое-то красивое решение, кроме как перебирать рекурсивно весь объект и проверять через isNaN()?

Comments

[Петр Мухуров]

Есть решение смотреть в АПИ библиотеки, которую юзаете.
fieldProps

Answer 1

[Евгений]

Может кому-то пригодится.
Решение оказалось не удачным. Если поле вводит в поле договор только цифры, то происходит преобразование к числу, хотя поле должно быть в виде строки.
Придется делать преобразование данных внутри компонента через parse/format.

export const convertObjectValues = (obj, numToStr) => {
  // Перебирает весь объект и производит конвертацию числа в строку и обратно.
  // numToStr = true конвертирует числовые значения в строковые
  // numToStr = false конвертирует строковые значения в числовые
  if (numToStr !== true && numToStr !== false) return;

  if (typeof obj === "object" && obj !== null) {
    //Получен объект
    if (Array.isArray(obj)) {
      // Объект оказался массивом. Перебор массива
      return obj.map(elem => convertObjectValues(elem, numToStr));
    } else {
      // Перебор объекта
      const result = {};
      for (const key in obj) {
        result[key] = convertObjectValues(obj[key], numToStr)
      }
      return result;
    }
  } else {
    // Получено простое значение (не объект и не массив)
    return isNaN(obj) ? obj : numToStr ? obj + '' : +obj;
  }
};

Тесты:

import chai from "chai";
import {convertObjectValues} from "./convertData";

const numbers = {
  "id": 7302,
  "enabled": 1,
  "capacity": 4,
  "manualEdited": 1,
  "cutoffs": [
    1235.25,
    {
      "id": 3468,
      "cutoffType": {
        "id": 1,
        "name": "Cutoff общий",
        "code": "MNFGNRL"
      },
      "value": "12:00"
    },
    {
      "id": 3467,
      "cutoffType": {
        "id": 4,
        "name": "Cutoff груза",
        "code": "CRGRGST"
      },
      "value": "14:00"
    }
  ]
};

const strings = {
  "id": "7302",
  "enabled": "1",
  "capacity": "4",
  "manualEdited": "1",
  "cutoffs": [
    "1235.25",
    {
      "id": "3468",
      "cutoffType": {
        "id": "1",
        "name": "Cutoff общий",
        "code": "MNFGNRL"
      },
      "value": "12:00"
    },
    {
      "id": "3467",
      "cutoffType": {
        "id": "4",
        "name": "Cutoff груза",
        "code": "CRGRGST"
      },
      "value": "14:00"
    }
  ]
};

describe("Тестирование глобальных функций конвертации данных", () => {

  it("Преобразование числа в строку", () => {
    const result = convertObjectValues(numbers, true);
    // console.log(JSON.stringify(numbers));
    // console.log(JSON.stringify(result));
    chai.expect(result).to.deep.include(strings);
  });

  it("Преобразование строки число", () => {
    const result = convertObjectValues(strings, false);
    // console.log(JSON.stringify(strings));
    // console.log(JSON.stringify(result));
    chai.expect(result).to.deep.include(numbers);
  });

});