Transform data structure to tree data in JavaScript

Question

I have a data structure like this:

 data = [
    {
      parent: {name: 'Sheet'},
      firstArray: [{sampleVar: 0.3, typeName: 'active'}, {sampleVar: 0.4, typeName: 'active'}],
      secondArray: [{sampleVar: 1.2, typeName: 'passive'}, {sampleVar: 1.3 , typeName: 'passive'}]
    },...
  ]

I want to transform it to a tree data like this:

  treeData = [
    {
      parent: {
        name: 'Sheet',
        children: [{
          typeName: 'active',
          children: [
            {sampleVar: 0.3},
            {sampleVar: 0.4}
          ]
        },
          {
            typeName: 'passive',
            children: [
              {sampleVar: 1.2},
              {sampleVar: 1.3}
            ]
          },...
        ]
      },...
    }
  ];

I have to mention that my variable typeName has the same value for each array. Does anyone know a good approach to achieve this?

trincot · Accepted Answer · 2022-05-25 14:32:31Z

1

You can use Object.values and map to get the result. I've used an example input that varies a bit more:

const data = [{
  parent: {name: 'SheetA'},
  justOne: [{sampleVar: 0.3, typeName: 'active'}],
  hasTwo: [{indicator: 1.2, typeName: 'passive'}, {indicator: 1.3 , typeName: 'passive'}]
}, {
  parent: {name: 'SheetB'},
  hasThree: [{otherVar: 9.3, typeName: 'selected'}, {otherVar: 9.4, typeName: 'selected'}, {otherVar: 9.5, typeName: 'selected'}],
  secondArray: [{message: 7.2, typeName: 'locked'}, {message: 7.3 , typeName: 'locked'}]
}];

const treeData = data.map(({parent, ...rest}) => ({
    ...parent,
    children: Object.values(rest).map(arr => ({
        typeName: arr[0]?.typeName,
        children: arr.map(({typeName, ...rest}) => rest)
    }))
}));

console.log(treeData);

answered May 25, 2022 at 14:32

trincot

357k38 gold badges282 silver badges338 bronze badges

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

Comments

Solomon · Accepted Answer · 2022-05-25 13:29:52Z

0

Considering each array has 2 items only each array has its own typename this works.

var result = [
    {
        parent: {
            name: data[0].parent.name,
            children: []
        }
    }
];

for (const property in data[0]) {
    if (property == "parent") continue;
    let array = data[0][property];
    result[0].parent.children.push({
        typeName: array[0].typeName,
        children: [
            {
                sampleVar: array[0].sampleVar
            },
            {
                sampleVar: array[1].sampleVar
            }
        ]
    });
}

console.log(result);

answered May 25, 2022 at 13:29

Solomon

1792 silver badges14 bronze badges

1 Comment

newlearner Over a year ago

that looks pretty good thanks! But what if I want to expand my items in my array? Can I make it dynamic?

Collectives™ on Stack Overflow

Transform data structure to tree data in JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related