Format a nested object

Question

I have a javascript variable with the following structure

var recurse = {
  level_0: [
    { 
      level_1 : [
        { 
          level_2_0 : [
            {
              level_3_0: {
                valid: true,
                available: false
              }
            }, {
              level_3_1 : {
                valid: true,
                available: true
              }
            }]
        }, { 
          level_2_1 : [
            {
              level_3_0: {
                valid: true,
                available: false
              }
            }, {
              level_3_1 : {
                valid: true,
                available: true
              }
            }]
        }]
    }]
}

Final required output structure

var recurse = {
  name: "level_0",
  property: [
    {
      name: "level_1",
      property: [
        {
          name: "level_2_0",
          property: [
            {
              name: "level_3_0",
              property: {
                valid: true,
                available: false
              }
            }, {
              name: "level_3_1",
              property: {
                valid: true,
                available: true
              }
            }]
        }, {
          name: "level_2_1",
          property: [
            {
              name: "level_3_0",
              property: {
                valid: true,
                available: false
              }
            }, {
              name: "level_3_1",
              property: {
                valid: true,
                available: true
              }
            }]
        }]
    }] 
}

Facing problem with cloning and updating the structure for this nested object using generic methods. How can I achieve the required final object structure using simple javascript or reactjs properties.

Which is the most appropriate method to clone a javascript object?

Note: the object names- level_0, level_1 level_2_0 could be random or dynamic.

he wants to be able to "path" update, including splice/delete with a deep clone, hand rolled solution without using libraries ie: he wants pain — user120242, May 05 '20 at 17:25
https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object , https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript/10916838#10916838 , there's a very popular `clone` library on npm — user120242, May 05 '20 at 17:27
@SILENT hi, thanks but I want to avoid using library for this, thus taking too much time. — PCmad80, May 05 '20 at 17:27
@Pramila Choudhary https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns To put it rather simply, it's going to be a _lot_ of work, as even the redux and React guys tell you this is the solution we've got, and it may not seem pretty. — user120242, May 05 '20 at 17:30
@user120242 hi, yes I had been trying to get the desired output without using any library thus its quite time-taking. I think there is no need to use splice/delete methods. — PCmad80, May 05 '20 at 17:31
Reopened. Although the text did ask about cloning, the main question asked is about the specific tree transformation, as the choice of accepted answer shows. — Scott Sauyet, May 05 '20 at 17:57

score 1 · Accepted Answer · answered May 05 '20 at 17:35

You can write a simple recursive function that recurses on the item if the item value is an array like below

var recurse = {
  level_0: [
    { 
      level_1 : [
        { 
          level_2_0 : [
            {
              level_3_0: {
                valid: true,
                available: false
              }
            }, {
              level_3_1 : {
                valid: true,
                available: true
              }
            }]
        }, { 
          level_2_1 : [
            {
              level_3_0: {
                valid: true,
                available: false
              }
            }, {
              level_3_1 : {
                valid: true,
                available: true
              }
            }]
        }]
    }]
}

function format(data) {
   return Object.entries(data).map(([key, value]) => {
       if(Array.isArray(value))
         return {
             name: key,
             property: [].concat(...value.map(item => format(item)))
         }
       return {
          name: key,
          property: value
       }
   })
}

console.log(format(recurse));

score 0 · Answer 2 · answered May 05 '20 at 17:59

You can transform it with something like this:

const transform = (tree) => 
  Object (tree) === tree
    ? Object .entries (tree) .map (([name, properties]) => ({
        name, 
        properties: Array .isArray (properties) ? properties .map (transform) : properties
      })) [0] // This is a strage thing to do with an object!  The original data structure is odd.
    : tree

var recurse = {level_0: [{level_1: [{level_2_0: [{level_3_0: {valid: true, available: false}}, {level_3_1: {valid: true, available: true}}]}, {level_2_1: [{level_3_0: {valid: true, available: false}}, {level_3_1: {valid: true, available: true}}]}]}]}

console .log (transform (recurse))

.as-console-wrapper {min-height: 100% !important; top: 0}

But the data structure you start with is quite odd. Each level of nesting except the innermost can only have a single property. Is that really how your data comes to you? It's a strange use of objects. (Then again, you are asking about how to reforat it...)

The [0] on the sixth line of the above deals with that oddity of the input.

Format a nested object

2 Answers2