Converting objects to arrays in reactJS

Question

Converting objects to arrays in reactJS

Here is the object structure I currently have:

    {
      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 is being received when the form is submitted.

I need a way to transform this object into the following format:

    [
    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

Answer 1

Answer №1

If you are looking to manipulate a list of object keys, consider using the .reduce() method:

// Create an 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",
}

// Use reduce on 'input' keys
const result = Object.keys(input).reduce((acc, el) => {
  // Split each key into name and index
  const [name, index] = el.split('_');

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

// The result now contains indexes as keys 
// and desired elements as values
console.log(Object.values(result));

Answer 2

If you are looking to manipulate a list of object keys, consider using the .reduce() method:

// Create an 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",
}

// Use reduce on 'input' keys
const result = Object.keys(input).reduce((acc, el) => {
  // Split each key into name and index
  const [name, index] = el.split('_');

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

// The result now contains indexes as keys 
// and desired elements as values
console.log(Object.values(result));

Answer 3

Answer №2

This is a possible solution

const details = {
  Amount1: 200,
  Amount2: 500,
  Amount3: 150,
  Note1: "some remarks",
  Note2: "additional info",
  Note3: "important notes",
  Reference1: "1234",
  Reference2: "5678",
  Reference3: "91011",
  Type1: "credit",
  Type2: "debit",
  Type3: "transfer",
}

const {
  attributes,
  highest
} = Object.keys(details).reduce((result, item) => {
  const [attribute, index] = item.split('_')
  return {
    attributes: [...new Set([...result.attributes, attribute])],
    highest: Math.max(result.highest, index)
  }
}, {
  attributes: [],
  highest: 0
})
const finalResult = Array(highest + 1).fill(0).map((_, index) =>{
  return attributes.reduce((res, attr) => {
    return {
      ...res,
      [attr]: details[attr + '_' + index]
    }
  }, {})
  }
)
console.log(finalResult)

Answer 4

This is a possible solution

const details = {
  Amount1: 200,
  Amount2: 500,
  Amount3: 150,
  Note1: "some remarks",
  Note2: "additional info",
  Note3: "important notes",
  Reference1: "1234",
  Reference2: "5678",
  Reference3: "91011",
  Type1: "credit",
  Type2: "debit",
  Type3: "transfer",
}

const {
  attributes,
  highest
} = Object.keys(details).reduce((result, item) => {
  const [attribute, index] = item.split('_')
  return {
    attributes: [...new Set([...result.attributes, attribute])],
    highest: Math.max(result.highest, index)
  }
}, {
  attributes: [],
  highest: 0
})
const finalResult = Array(highest + 1).fill(0).map((_, index) =>{
  return attributes.reduce((res, attr) => {
    return {
      ...res,
      [attr]: details[attr + '_' + index]
    }
  }, {})
  }
)
console.log(finalResult)

Answer 5

Answer №3

Here is a method to simplify the object:

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 6

Here is a method to simplify the object:

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 7

Answer №4

Below is a handy function I quickly put together to assist you:

const data = {
  DepositAmount_0: 200,
  DepositAmount_1: 350,
  DepositAmount_2: 100,
  Notes_0: "important notes",
  Notes_1: "additional comments",
  Notes_2: "feedback",
  Reference_0: "xyz",
  Reference_1: "abc",
  Reference_2: "12345",
  Type_0: "online transfer",
  Type_1: "cash",
  Type_2: "credit card",
};

const transformDataToArray = (input) => {
  const resultArr = [];

  for (const [key, value] of Object.entries(input)) {
    const keyInfo = key.split("_");
    const index = parseInt(keyInfo[1]);
    if (resultArr[index] === undefined) {
      resultArr.splice(index, 0, {});
    }
    let newObj = resultArr[index];
    newObj = { ...newObj, [key]: value };
    resultArr[index] = newObj;
  }

  return resultArr;
};

console.log(transformDataToArray(data));

Answer 8

Below is a handy function I quickly put together to assist you:

const data = {
  DepositAmount_0: 200,
  DepositAmount_1: 350,
  DepositAmount_2: 100,
  Notes_0: "important notes",
  Notes_1: "additional comments",
  Notes_2: "feedback",
  Reference_0: "xyz",
  Reference_1: "abc",
  Reference_2: "12345",
  Type_0: "online transfer",
  Type_1: "cash",
  Type_2: "credit card",
};

const transformDataToArray = (input) => {
  const resultArr = [];

  for (const [key, value] of Object.entries(input)) {
    const keyInfo = key.split("_");
    const index = parseInt(keyInfo[1]);
    if (resultArr[index] === undefined) {
      resultArr.splice(index, 0, {});
    }
    let newObj = resultArr[index];
    newObj = { ...newObj, [key]: value };
    resultArr[index] = newObj;
  }

  return resultArr;
};

console.log(transformDataToArray(data));

Converting objects to arrays in reactJS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Issue: Incorrectly calling a hook. Hooks can only be used within the body of a function component. Assistance needed to resolve this issue

Exploring the Functionality of ngMousedown and ngMouseup in AngularJS

What is the method or variable called "afterShow" used for in FancyBox V4 and how does it differ from its counterpart in JQuery-FancyBox V3?

Guide on converting a complex nested json into the jquery autocomplete format

Is it possible to iterate over an enum using Object.entries<T>(Enum).map() in TypeScript, or does it only function with string-based enums?

Managing actions on dynamically generated dropdown options in <select> elements

Creating Vue3 Component Instances Dynamically with a Button Click

Trying to understand the strange behavior of HTML parsing with jQuery in Javascript and Firefox

Error message: JavaScript is unable to save data to an array retrieved from Ajax, resulting in

Page elements subtly move when reloading in Chrome

"Utilize a specific parameter in the npm run script for enhanced

Updating a nested document within an array - Utilizing MongoDB with the Node.js driver

What is the best way to import scss files and images in Vue.js storybook stories?

What is causing my vue.js table to not display properly?

Is it possible to transfer .NET backend functions to a frontend framework like React or Vue for client-side execution?

Issue with the submission button not triggering onclick event correctly

What is the best way to incorporate user-provided values into a dynamic URL?

Incorporating Javascript into a .Net MVC 3 Project

Changing the value within a deeply nested object

What methods can I use to identify my current page location and update it on my navigation bar accordingly?