Javascript looping problem and converting nested objects into an array

Question

In the below array I am trying to convert "reporting" object into an array of objects. Below is how I am trying:

  const data = [{
    m_id: '61',
    reporting: {
     0: {
      report_cd: 'L',
      report_category: 'Light Vehicles'
     },
     1: {
      report_cd: 'M',
      report_category: 'Motorcycles'
     }
    }
   },
   {
    m_id: '62',
    reporting: {
     0: {
      report_cd: 'L',
      report_category: ' Extra Light Vehicles'
     },
     1: {
      report_cd: 'M',
      report_category: 'Bike'
     },
     2: {
      report_cd: 'H',
      report_category: 'Extra Heavy'
     }
    }
   }
  ];

  var arr = [];
  for (let j = 0; j < data.length; j++) {
   let keys = Object.keys(data[j].reporting);

   for (var i = 0, n = keys.length; i < n; i++) {
    var key = keys[i];
    arr[key] = data[j].reporting[key];
   }
   data[j].reporting = arr;
  }
  console.log(data);

I am able to convert it into an array in the current output but there's some problem in my loop due to which for both the objects I am getting back 3 arrays for reporting:

Current Output :

[{
 "m_id": "61",
 "reporting": [{
  "report_cd": "L",
  "report_category": " Extra Light Vehicles"
 }, {
  "report_cd": "M",
  "report_category": "Bike"
 }, {
  "report_cd": "H",
  "report_category": "Extra Heavy"
 }]
}, {
 "m_id": "62",
 "reporting": [{
  "report_cd": "L",
  "report_category": " Extra Light Vehicles"
 }, {
  "report_cd": "M",
  "report_category": "Bike"
 }, {
  "report_cd": "H",
  "report_category": "Extra Heavy"
 }]
}]

Expected Output:

[{
 "m_id": "61",
 "reporting": [{
  "report_cd": "L",
  "report_category": "Light Vehicles"
 }, {
  "report_cd": "M",
  "report_category": "Motorcycles"
 }]
}, {
 "m_id": "62",
 "reporting": [{
  "report_cd": "L",
  "report_category": " Extra Light Vehicles"
 }, {
  "report_cd": "M",
  "report_category": "Bike"
 }, {
  "report_cd": "H",
  "report_category": "Extra Heavy"
 }]
}]

Ramesh Reddy · Accepted Answer · 2020-07-17 13:22:59Z

The problem with your code is that since arrays are reference types using the same array(var arr) for the second iteration will also modify the reporting array of the first object.

An alternative using map and Object.values:

const data = [{
    m_id: '61',
    reporting: {
      0: {
        report_cd: 'L',
        report_category: 'Light Vehicles'
      },
      1: {
        report_cd: 'M',
        report_category: 'Motorcycles'
      }
    }
  },
  {
    m_id: '62',
    reporting: {
      0: {
        report_cd: 'L',
        report_category: ' Extra Light Vehicles'
      },
      1: {
        report_cd: 'M',
        report_category: 'Bike'
      },
      2: {
        report_cd: 'H',
        report_category: 'Extra Heavy'
      }
    }
  }
];

const result = data.map(el => ({...el, reporting: Object.values(el.reporting)}))

console.log(result)

Object.values is just like Object.keys but instead of returning an array of keys, it'll return an array of values.

EugenSunic · Accepted Answer · 2020-07-17 13:27:30Z

0

You can use Object.keys to create your array for reports inside data object

const data = [{
    m_id: '61',
    reporting: {
      0: {
        report_cd: 'L',
        report_category: 'Light Vehicles'
      },
      1: {
        report_cd: 'M',
        report_category: 'Motorcycles'
      }
    }
  },
  {
    m_id: '62',
    reporting: {
      0: {
        report_cd: 'L',
        report_category: ' Extra Light Vehicles'
      },
      1: {
        report_cd: 'M',
        report_category: 'Bike'
      },
      2: {
        report_cd: 'H',
        report_category: 'Extra Heavy'
      }
    }
  }
];

const result = data.map(x => ({
  ...x,
  reporting: Object.keys(x.reporting).map(key => x.reporting[key])
}))

console.log(result)

edited Jul 17, 2020 at 13:27

answered Jul 17, 2020 at 13:18

EugenSunic

13.8k15 gold badges68 silver badges96 bronze badges

2 Comments

Yevhen Horbunkov Over a year ago

Why not Object.keys(x.reporting).map(key => x.reporting[key])?

EugenSunic Over a year ago

applied the suggested change

Collectives™ on Stack Overflow

Javascript looping problem and converting nested objects into an array

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related