将 object 转换为 reactJS 中的数组

Question

I have following object:

    {
      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"
}

This object I am getting when submitting form.

How can I transfer that object into this:

    [
    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"},
    ]

Answer 1

You can use .reduce() on list of object keys:

 // 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));

Answer 2

You could do something like this

 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)

Answer 3

Try reduce:

 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" },

Answer 4

Here is a function I whipped out to do this for you:

 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));