How to transform nested object of objects into array of objects

Question

Hi all I have the following code

the data that I want to transform.

    const obj = {

     numbers: {
      label: "main numbers",
      pageTitle: "Numbers",
      key: "1",
        items: {
          firstNumber: {
            label: "first number",
            pageTitle: "first",
            key: "first"
           },
         secondNumber: {
            label: "second number",
            pageTitle: "second",
            key: "second"
           }  
        }
     },

    letters: {
      label: "main Letters",
      pageTitle: "Letters",
      key: "2",
         items: {
           firstLetter: {
            label: "first Letter",
            pageTitle: "first",
            key: "first"
         }
       }
     },

    signs: {
       label: "main sign",
       pageTitle: "Sign",
       key: "3"
    }
 };

In my obj variable I have 3 other objects

numbers object which has items property which includes 2 other objects.

letters object which has items property which includes only one object.

signs object.

I need to transform my obj to the following way.

    [
      {
        label:"main numbers", 
        pageTitle:"Numbers", 
        key:1, 
        children: [{label,pageTitle,key},{label,pageTitle,key}] 
      },
      {
        label:"main Letters", 
        pageTitle:"Letters", 
        key:1, 
        children: [{label,pageTitle,key}] 
      },
     {
        label:"main sign", 
        pageTitle:"Sign", 
        key:1, 
        children: [] 
      },


    ]

for that transformation, I wrote the following code.

    const transformedData = Object.values(obj).map((menuitem) => menuitem);

    const data = [];

    transformedData?.map((x) => {
      const newData = {};
      newData.label = x.label;
      newData.pageTitle = x.pageTitle;
      newData.key = x.key;
      newData.children = x?.Object?.values(items)?.map((el) => {
        newData.children.label = el.label;
        newData.children.pageTitle = el.pageTitle;
        newData.children.key = el.key;
      });
      data.push(newData);
    });

Everything was working, but for children instead of printing an array it prints undefined.

Please help me to resolve this issue.

Vardan Hambardzumyan · Accepted Answer · 2022-11-25 11:22:45Z

2

I created a function for your case.

    const convert = data =>
      Object.values(data)?.map(x => ({
       label: x.label,
       pageTitle :x.pageTitle ,
       key: x.pathname,
        children: x.items
          ? Object.values(x.items || {}).map(el => ({ label: el.label, 
            key:el.pathname,pageTitle:el.pageTitle  }))
         : null,
      }));

You can use like const items = convert(obj).

answered Nov 25, 2022 at 11:22

Vardan Hambardzumyan

4162 silver badges12 bronze badges

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

Comments

MoxxiManagarm · Accepted Answer · 2022-11-24 12:37:54Z

1

xdoesn't have Objects. Change it to:

newData.children = Object.values(x.items)?.map(/*...*/);

answered Nov 24, 2022 at 12:37

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

2 Comments

Nina Scholz Over a year ago

Object.values returns always an array.

someone Over a year ago

can you show it in a code snippet, please? :)

Marios · Accepted Answer · 2022-11-24 14:36:01Z

Is this what you're after?

const transformedData = Object.values(obj).map((menuitem) => menuitem);

const data = [];

transformedData?.map((x) => {
  const newData = {};
  newData.label = x.label;
  newData.pageTitle = x.pageTitle;
  newData.key = x.key;
  if(x.hasOwnProperty('items')){
  newData.children = Object.values(x.items).map((el) => {
    const obj={
    label:el.label,
    pageTitle:el.pageTitle,
    key:el.key
    }
    return obj
  })};
  data.push(newData);
});

console.log(data)

Your code return undefined because inside map you didn't return anything so newData.children was never populated with anything.

Also, I think accessing and assigning newData.children.label was problematic since there was no newData.children yet. So we declare a temp obj inside map and we return it

Lastly we need to check if items is a property that exists in the first place.

Collectives™ on Stack Overflow

How to transform nested object of objects into array of objects

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related