How to flat array of object in es6?

Question

I've a array of object like. i want to extract nested object and return it as expected output. My approach is already not working and also not sure its efficient to iterating on large set of data.

const data = [
    {
        name: 'Micheal',
        desc: 'Micheal',
        empObj: {
            empId: 1,
            empName: 'Micheal',
            country: 'UK',
        }
    },
    {
        name: 'Allen',
        desc: 'Allen',
        empObj: {
            empId: 2,
            empName: 'Allen',
            country: 'Germany',

        }
    },
    {
        name: 'Rose',
        desc: 'Rose',
        empObj: {
            empId: 3,
            empName: 'Rose',
            country: 'USA',
        }
    }
];

I need to flat/ convert the data like

[
    {
        name: 'Micheal',
        desc: 'Micheal',
        empId: 1,
        empName: 'Micheal',
        country: 'UK',
    },
    {
        name: 'Allen',
        desc: 'Allen',
        empId: 2,
        empName: 'Allen',
        country: 'Germany',
    },
    
    {
        name: 'Rose',
        desc: 'Rose',    
        empId: 3,
        empName: 'Rose',
        country: 'USA',
    
        
    }
]

but I'm getting

Uncaught TypeError: Cannot convert undefined or null to object

const expected = Object.keys(data.empObj).reduce(function(r, k) {
  return r.concat(k, object.empObj[k]);
}, []);

console.log('expected', expected);

Thanks

Yousaf · Answer 1 · 2021-07-29T06:06:33.213

Use the map() method along with destructuring and the spread and rest syntax.

We can achieve the desired output by destruturing the empObj key and collecting the rest of the properties in the each object in the array using the rest syntax.

Inside the map() method's callback function, return a new object, spreading the empObj as well as other properties in the newly created object using the spread syntax.

const data = [
  { name: 'Micheal', desc: 'Micheal', empObj: { empId: 1, empName: 'Micheal', country: 'UK' } },
  { name: 'Allen', desc: 'Allen', empObj: { empId: 2, empName: 'Allen', country: 'Germany' } }
];

const result = data.map(({ empObj, ...rest }) => {
  return { ...rest, ...empObj };
});

console.log(result);

Reason why your code throws an error is because data is an array, so data.empObj is undefined and you are passing this undefined value to the Object.keys(...) method.

score 3 · Accepted Answer · answered Jul 29 '21 at 05:49

You can easily achieve this using map

data.map(({ name, desc, empObj }) => ({ name, desc, ...empObj }))

const data = [
  {
    name: "Micheal",
    desc: "Micheal",
    empObj: {
      empId: 1,
      empName: "Micheal",
      country: "UK",
    },
  },
  {
    name: "Allen",
    desc: "Allen",
    empObj: {
      empId: 2,
      empName: "Allen",
      country: "Germany",
    },
  },
  {
    name: "Rose",
    desc: "Rose",
    empObj: {
      empId: 3,
      empName: "Rose",
      country: "USA",
    },
  },
];

const result = data.map(({ name, desc, empObj }) => ({ name, desc, ...empObj, }));

console.log(result);

score 1 · Answer 3 · answered Jul 29 '21 at 05:50

1

Just use Spread syntax (...) and .map()

const output = data.map(d => ({name: d.name, desc: d.desc, ...d.empObj}))

answered Jul 29 '21 at 05:50

Lin Du

88,126
95
281
483

How to flat array of object in es6?

3 Answers3