Complicated array of objects into simple one

Question

My array looks like, but includes 1000+ objects:

data = [
  {
    code: '3019476',
    _id: '60033f61-8a4e-4622-9731-decd07bc44e1',
    vendor: 'DKNY',
    info: ['array of objects'],
    tags: [
      { type: 1, label: 'dsfs' },
      { type: 2, label: 'thisOne' },
      { type: 3, label: 'sdas' },
    ],
  },
];

So I am trying to get is an array of objects, all of which are the same, but each one has one of the tags params.

Expected output:

data = [
  {all data that object that i had contains, but tag is { type: 1, label: 'dsfs' },
  {all data that object that i had contains, but tag is { type: 2, label: 'thisOne' },
  {all data that object that i had contains, but tag is { type: 3, label: 'sdas' }
]

Answer 1

Using .reduce :

 const data = [ { code: '3019476', _id: '60033f61-8a4e-4622-9731-decd07bc44e1', vendor: 'DKNY', info: ['array of objects'], tags: [ { type: 1, label: 'dsfs' }, { type: 2, label: 'thisOne' }, { type: 3, label: 'sdas' } ] } ]; // iterate over array items const res = _.reduce(data, (acc,item) => { // get item tags const { tags=[] } = item; // iterate over tags _.forEach(tags, tag => { // for each tag, copy the object without the tags list const { tags, ...itemDetails } = _.cloneDeep(item); // add a new object containing the copied properties excluding tags + current tag acc.push({...itemDetails, tag }) }); return acc; }, []); console.log(res);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script>

Using .flatMap :

 const data = [ { code: '3019476', _id: '60033f61-8a4e-4622-9731-decd07bc44e1', vendor: 'DKNY', info: ['array of objects'], tags: [ { type: 1, label: 'dsfs' }, { type: 2, label: 'thisOne' }, { type: 3, label: 'sdas' } ] } ]; // iterate over array items const res = _.flatMap(data, item => { // get item tags const { tags=[] } = item; // return list of the object each with different tag return _.map(tags, tag => { const { tags, ...itemDetails } = _.cloneDeep(item); return {...itemDetails, tag }; }); }); console.log(res);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script>

Answer 2

You could map the outer and inner array.

 const data = [{ code: '3019476', _id: '60033f61-8a4e-4622-9731-decd07bc44e1', vendor: 'DKNY', info: ['array of objects'], tags: [{ type: 1, label: 'dsfs' }, { type: 2, label: 'thisOne' }, { type: 3, label: 'sdas' }] }], result = data.flatMap(({ tags, ...o }) => tags.map(tag => ({...o, tag }))); console.log(result);