EN VI

How to convert json columns to json rows in Angular?

How to convert json columns to json rows in Angular

How can I convert json columns to json rows?

From

[ {"accountCode": "01", "accountName": "Cash on Hand", "HeadOffice": "100", "Marketing": "200", "Sales": "300", "Accounting": "400"}, {"accountCode": "02", "accountName": "Cash in Bank", "HeadOffice": "150", "Marketing": "250", "Sales": "350", "Accounting": "450"}, {"accountCode": "03", "accountName": "Loans", "HeadOffice": "250", "Marketing": "350", "Sales": "450", "Accounting": "450"}, {"accountCode": "04", "accountName": "Advances", "HeadOffice": "150", "Marketing": "250", "Sales": "350", "Accounting": "450"} ]

[ {"AccountCode": "01", "accountName": "Cash on Hand", "costCenter": "HeadOffice", "amount": "100"}, {"AccountCode": "01", "accountName": "Cash on Hand", "costCenter": "Marketing", "amount": "200"}, {"AccountCode": "01", "accountName": "Cash on Hand", "costCenter": "Sales", "amount": "300"}, {"AccountCode": "01", "accountName": "Cash on Hand", "costCenter": "Accounting", "amount": "400"}, {"AccountCode": "02", "accountName": "Cash in Bank", "costCenter": "HeadOffice", "amount": "150"}, {"AccountCode": "02", "accountName": "Cash in Bank", "costCenter": "Marketing", "amount": "250"}, {"AccountCode": "02", "accountName": "Cash in Bank", "costCenter": "Sales", "amount": "350"}, {"AccountCode": "02", "accountName": "Cash in Bank", "costCenter": "Accounting", "amount": "450"}, {"AccountCode": "03", "accountName": "Loans", "costCenter": "HeadOffice", "amount": "250"}, {"AccountCode": "03", "accountName": "Loans", "costCenter": "Marketing", "amount": "350"}, {"AccountCode": "03", "accountName": "Loans", "costCenter": "Sales", "amount": "450"}, {"AccountCode": "03", "accountName": "Loans", "costCenter": "Accounting", "amount": "450"}, {"AccountCode": "04", "accountName": "Advances", "costCenter": "HeadOffice", "amount": "150"}, {"AccountCode": "04", "accountName": "Advances", "costCenter": "Marketing", "amount": "250"}, {"AccountCode": "04", "accountName": "Advances", "costCenter": "Sales", "amount": "350"}, {"AccountCode": "04", "accountName": "Advances", "costCenter": "Accounting", "amount": "450"} ]

Thank you!

Solution:

you can iterate over the initial JSON array and transform each object into multiple objects with the desired structure. Here's a sample code snippet to achieve this:

// Assuming your initial JSON data is stored in an array called jsonData
let newData = [];

jsonData.forEach(item => {
  Object.keys(item).forEach(key => {
    if (key !== 'accountCode' && key !== 'accountName') {
      newData.push({
        AccountCode: item.accountCode,
        accountName: item.accountName,
        costCenter: key,
        amount: item[key]
      });
    }
  });
});

// newData will now contain the transformed JSON rows
console.log(newData);

you should be able to convert the JSON columns to JSON rows as per your specified output structure in your Angular application