Преобразовать объект в массив в reactJS

Question

У меня есть следующий объект:

    {
      DepositAmt_0: 133
      DepositAmt_1: 455
      DepositAmt_2: 123
      DepositNotes_0: "some notes "
      DepositNotes_1: "some comment"
      DepositNotes_2: "some comment"
      PayReference_0: "aaa"
      PayReference_1: "bbb"
      PayReference_2: "qwerty"
      PaymentType_0: "payment"
      PaymentType_1: "card"
      PaymentType_2: "card"
}

Этот объект я получаю при отправке формы.

Как я могу передать этот объект в это:

    [
    0:{DepositAmt:123, DepositNotes:"some notes", PayReference : "aaa", PaymentType:"payment"},
    1:{DepositAmt:455, DepositNotes:"some comment", PayReference : "bbb", PaymentType:"card"},
    2:{DepositAmt:123, DepositNotes:"some comment", PayReference : "qwerty", PaymentType:"card"},
    ]

javascript

-1

someone 21 Янв 2022 в 17:50

1

Что вы пробовали до сих пор? Еще одним важным моментом было бы описать, будет ли у вас произвольное количество DepositAmt_n в вашем объекте или оно ограничено тремя, как показано в вашем примере. Посмотрите на регулярное выражение..

–

iLuvLogix

21 Янв 2022 в 17:53

Речь идет о n случаях

–

someone

21 Янв 2022 в 18:08

Answer 1

Вы можете использовать .reduce() в списке ключей объекта:

// your initial object
const input = {
      DepositAmt_0: 133,
      DepositAmt_1: 455,
      DepositAmt_2: 123,
      DepositNotes_0: "some notes ",
      DepositNotes_1: "some comment",
      DepositNotes_2: "some comment",
      PayReference_0: "aaa",
      PayReference_1: "bbb",
      PayReference_2: "qwerty",
      PaymentType_0: "payment",
      PaymentType_1: "card",
      PaymentType_2: "card",
}

// reduce thru 'input' keys
const result = Object.keys(input).reduce((acc, el) => {
  // split each key to name and it's index
  const [name, index] = el.split('_');

  // add key to element with obtained index
  if (!acc[index]) acc[index] = {};
  acc[index][name] = input[el];
  return acc;
}, {});

// result is an object where keys are indexes 
// and values are elements you want,
// so now you get desired result using Object.values
console.log(Object.values(result));

2

Xeelley 21 Янв 2022 в 18:12

Танки @Xeeley, ваше решение полезно.

–

someone

21 Янв 2022 в 18:16

Не за что!

–

Xeelley

21 Янв 2022 в 18:17

Answer 2

Вы могли бы сделать что-то вроде этого

const data = {
  DepositAmt_0: 133,
  DepositAmt_1: 455,
  DepositAmt_2: 123,
  DepositNotes_0: "some notes ",
  DepositNotes_1: "some comment",
  DepositNotes_2: "some comment",
  PayReference_0: "aaa",
  PayReference_1: "bbb",
  PayReference_2: "qwerty",
  PaymentType_0: "payment",
  PaymentType_1: "card",
  PaymentType_2: "card",
}

const {
  keys,
  max
} = Object.keys(data).reduce((res, label) => {
  const [key, i] = label.split('_')
  return {
    keys: [...new Set([...res.keys, key])],
    max: Math.max(res.max, i)
  }
}, {
  keys: [],
  max: 0
})
const result = Array(max + 1).fill(0).map((_, i) =>{
  return keys.reduce((res, key) => {
    return {
      ...res,
      [key]: data[key + '_' + i]
    }
  }, {})
  }
)
console.log(result)

1

R4ncid 21 Янв 2022 в 18:13

Answer 3

Попробуйте уменьшить:

const obj = {
  DepositAmt_0: 133,
  DepositAmt_1: 455,
  DepositAmt_2: 123,
  DepositNotes_0: "some notes ",
  DepositNotes_1: "some comment",
  DepositNotes_2: "some comment",
  PayReference_0: "aaa",
  PayReference_1: "bbb",
  PayReference_2: "qwerty",
  PaymentType_0: "payment",
  PaymentType_1: "card",
  PaymentType_2: "card"
};

const transformObject = (object) => {
  const objKeys = Object.keys(object);
  const result = objKeys.reduce((resultObject, currentProperty) => {
    const propertyNumber = currentProperty.slice(-1);
    const newPropertyKey = currentProperty.substring(0, currentProperty.length - 2);

    return {
      ...resultObject,
      [propertyNumber]: {
        ...resultObject[propertyNumber],
        [newPropertyKey]: object[currentProperty]
      },
    };
  }, {});

  return result;
};

console.log(transformObject(obj));

// 0: { DepositAmt: 123, DepositNotes: "some notes", PayReference: "aaa", PaymentType:"payment" },
// 1: { DepositAmt: 455, DepositNotes: "some comment", PayReference: "bbb", PaymentType:"card" },
// 2: { DepositAmt: 123, DepositNotes: "some comment", PayReference: "qwerty", PaymentType:"card" },

1

Daniil Emelin 21 Янв 2022 в 18:16

Answer 4

Вот функция, которую я сделал, чтобы сделать это для вас:

const input = {
  DepositAmt_0: 133,
  DepositAmt_1: 455,
  DepositAmt_2: 123,
  DepositNotes_0: "some notes ",
  DepositNotes_1: "some comment",
  DepositNotes_2: "some comment",
  PayReference_0: "aaa",
  PayReference_1: "bbb",
  PayReference_2: "qwerty",
  PaymentType_0: "payment",
  PaymentType_1: "card",
  PaymentType_2: "card",
};

const convertObjToArrOfObj = (obj) => {
  const convertedArr = [];

  for (const [key, value] of Object.entries(obj)) {
    const newKey = key.split("_");
    const arrIndex = parseInt(newKey[1]);
    if (convertedArr[arrIndex] === undefined) {
      convertedArr.splice(arrIndex, 0, {});
    }
    let object = convertedArr[arrIndex];
    object = { ...object, [key]: value };
    convertedArr[arrIndex] = object;
  }

  return convertedArr;
};

console.log(convertObjToArrOfObj(input));

1

Brixi 21 Янв 2022 в 18:42

Преобразовать объект в массив в reactJS

4 ответа

Похожие вопросы

Новые вопросы

javascript