Map over Javascript array and transform objects in it to a specific format?

Question

I have an array of objects

const mainArray = [{
    name: 'main name',
    id: 'main id',
    parent: [{
      name: 'parent name',
      id: '1'
    }],
    child: [{
      name: 'child name',
      id: 'child id'
    }]
  }, {
    name: 'main name 2',
    id: 'main id 2',
    parent: [{
      name: 'parent name',
      id: '1'
    }],
    child: [{
      name: 'child name 2',
      id: 'child id 2'
    }]
  },
  {
    name: 'main name 3',
    id: 'main id 3',
    parent: [{
      name: 'parent name something else',
      id: '2'
    }],
    child: [{
      name: 'child name 3',
      id: 'child id 3'
    }]
  }
]

I need to bring it to this form

const resultArray = [{
  key: 'main',
  title: 'main name',
}, {
  key: 'parent',
  title: 'parent name'
}, {
  key: 'child',
  title: 'child name'
}]

So far I got this

if (mainArray) {
   mainArray.map((main) => {
     if (main.child && main.child.length) {
       if (main.parent && main.parent.length) {
         main.parent.map((item) => {
           data.push({
             key: 'parent',
             title: item.name
           });
         });
       }

       data.push({
         key: 'main',
         title: main.name
       });

       main.child.map((item) => {
         data.push({
           key: 'child',
           title: item.name
         });
       });
     }
   });
 }

And then I take this data array to display if a table and it looks like this

My problem is - two mains can be different but have the same parent (parents have the same ids) and then I don't need to add the parent to array two times, and I need it to be displayed like this

So I'm looking to a way to if two parents objects have the same id to merge them together so that in the final array there will be only one parent and the main and the child of that parent get stuck to one parent instead of two identical ones

Here the link to jsfiddle

I can use lodash

This is not a map operation. You do not return anything from the inner function and you ignore the result. So I think there is no point on using the map function. Use forEach. It fits much better with the rest of your code. — Alkis Mavridis
– Alkis Mavridis, Commented Oct 26, 2019 at 9:58

Nenad Vracar · Accepted Answer · 2019-10-26 09:54:00Z

1

You could first group by parent and return an object where each key is parent name, then from that object you can create an array.

const mainArray = [{"name":"main name","id":"main id","parent":[{"name":"parent name","id":"1"}],"child":[{"name":"child name","id":"child id"}]},{"name":"main name 2","id":"main id 2","parent":[{"name":"parent name","id":"1"}],"child":[{"name":"child name 2","id":"child id 2"}]},{"name":"main name 3","id":"main id 3","parent":[{"name":"parent name something else","id":"2"}],"child":[{"name":"child name 3","id":"child id 3"}]}]


function children(rest, child) {
  const result = [{
    key: 'main',
    title: rest.name
  }];
  result.push(...child.map(({
    name
  }) => ({
    key: 'child',
    title: name
  })))
  return result;
}

const groupByParent = mainArray.reduce((r, {
  parent,
  child,
  ...rest
}) => {
  parent.forEach(p => {
    if (!r[p.name]) {
      r[p.name] = [{
          key: 'parent',
          title: p.name
        },
        ...children(rest, child)
      ]
    } else {
      r[p.name].push(...children(rest, child));
    }
  })

  return r;
}, {})

const result = Object.values(groupByParent).flat()
console.log(result)

answered Oct 26, 2019 at 9:54

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Person Over a year ago

This helped a lot, thank you. Can you please explain why do we need to user spread when we pushing child to result result.push(...child.map(({...?

Nenad Vracar Over a year ago

Because map returns an array and you want to push each object not an array.

Collectives™ on Stack Overflow

Map over Javascript array and transform objects in it to a specific format?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related