Convert array in to specific format recursively

Question

I have one array that contains hierarchical data, i wan to convert it to hierarchy but in different format. I tried to use recursive method but its not giving proper data

Below is my code what i tried to implement

static convertConfigJson(data, finalResults = []) {

        const configData = JSON.parse(JSON.stringify(data));

        return configData.map((item) => {
            const { name, type, value, path } = item;
            let children = {}
            if (type === 'Object') {
              children = this.convertConfigJson(value, finalResults);
            } else {

            finalResults.push({
                id: name,
                name: name,
                children: children
            })
            }




            console.log('>>>>>>>>>', finalResults)

            return finalResults;
          });   
    }

Below is JSON array that i am getting from API

[
        {
            "name": "info",
            "type": "Object",
            "value": [
                {
                    "name": "app",
                    "type": "Object",
                    "value": [
                        {
                            "path": "info.app",
                            "name": "encoding",
                            "type": "TEXT",
                            "value": "@project.build.sourceEncoding@"
                        },
                        {
                            "name": "java",
                            "type": "Object",
                            "value": [
                                {
                                    "path": "info.app.java",
                                    "name": "source",
                                    "type": "TEXT",
                                    "value": "@java.version@"
                                },
                                {
                                    "path": "info.app.java",
                                    "name": "target",
                                    "type": "TEXT",
                                    "value": "java.version@"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]

I want to convert above array in below format i.e. change value array to children

[
    {
        "name": "info",
        "type": "Object",
        "children": [
            {
                "name": "app",
                "type": "Object",
                "children": [
                    {
                        "path": "info.app",
                        "name": "encoding",
                        "type": "TEXT",
                        "value": "@project.build.sourceEncoding@"
                    },
                    {
                        "name": "java",
                        "type": "Object",
                        "children": [
                            {
                                "path": "info.app.java",
                                "name": "source",
                                "type": "TEXT",
                                "value": "@java.version@"
                            },
                            {
                                "path": "info.app.java",
                                "name": "target",
                                "type": "TEXT",
                                "value": "java.version@"
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

user120242 · Accepted Answer · 2020-06-12 10:30:58Z

5

Simple recursive walk on all elements in children property. set .value to .children and delete .value

walk = node => {
  if(!node.value || typeof node.value!=='object') return
  node.children = node.value
  delete node.value
  node.children.forEach(walk)
}

data.forEach(walk)

console.log(data)

<script>
data=[
        {
            "name": "info",
            "type": "Object",
            "value": [
                {
                    "name": "app",
                    "type": "Object",
                    "value": [
                        {
                            "path": "info.app",
                            "name": "encoding",
                            "type": "TEXT",
                            "value": "@project.build.sourceEncoding@"
                        },
                        {
                            "name": "java",
                            "type": "Object",
                            "value": [
                                {
                                    "path": "info.app.java",
                                    "name": "source",
                                    "type": "TEXT",
                                    "value": "@java.version@"
                                },
                                {
                                    "path": "info.app.java",
                                    "name": "target",
                                    "type": "TEXT",
                                    "value": "java.version@"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
</script>

edited Jun 12, 2020 at 10:30

answered Jun 11, 2020 at 15:14

user120242

15.3k3 gold badges43 silver badges53 bronze badges

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

6 Comments

user120242 Over a year ago

modern browsers, difference is mostly negligible: youtube.com/watch?v=m9cTaYI95Zc&feature=youtu.be&t=951 v8.dev/blog/elements-kinds#avoid-creating-holes

Dmitry Reutov Over a year ago

@Disfigure, what will be gained on 10 000 elements?

Scott Sauyet Over a year ago

@Disfigure: how much performance boost do you think is worth the extra code complexity? This is a nice simple solution.

Disfigure Over a year ago

@user120242 I agree, you said "mostly negligible" so the difference exists :)

user120242 Over a year ago

right, but as you can see in the article on V8 as an example, forEach has native level optimizations. In some cases, depending on what you are doing, it can actually be faster

|

Siva Kondapi Venkata · Accepted Answer · 2020-06-12 04:19:17Z

1

write transform method, When ever object has the "value" type is Array then call the transform recursively.

const transform = ({ value, ...rest }) => {
  const item = { ...rest };
  Array.isArray(value)
    ? (item["children"] = value.map(transform))
    : (item["value"] = value);
  return item;
};

// Update: Based on @user120242 suggestion, creating another object is not required and using `Object.assign` will simplify.

const transform2 = ({ value, ...rest }) =>
  Object.assign(
    rest,
    Array.isArray(value) ? { children: value.map(transform2) } : { value }
  );

const items = [
  {
    name: "info",
    type: "Object",
    value: [
      {
        name: "app",
        type: "Object",
        value: [
          {
            path: "info.app",
            name: "encoding",
            type: "TEXT",
            value: "@project.build.sourceEncoding@",
          },
          {
            name: "java",
            type: "Object",
            value: [
              {
                path: "info.app.java",
                name: "source",
                type: "TEXT",
                value: "@java.version@",
              },
              {
                path: "info.app.java",
                name: "target",
                type: "TEXT",
                value: "java.version@",
              },
            ],
          },
        ],
      },
    ],
  },
];

const output = items.map(transform);
console.log(output);

console.log(items.map(transform2));

edited Jun 12, 2020 at 4:19

answered Jun 11, 2020 at 16:37

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

3 Comments

Siva Kondapi Venkata Over a year ago

@ScottSauyet, Yeah, Did not see your answer before posting. even came up with same method name transform :)

Siva Kondapi Venkata Over a year ago

@user120242, Agree, creating new clone is unnecessary. should have updated rest itself. Just updated answer with alternate way using the Object.assign. Thank you.

Scott Sauyet Over a year ago

That updated version is very nice! I think I'll add an update to mine to match.

Scott Sauyet · Accepted Answer · 2020-06-12 12:14:41Z

This technique is similar to the answer from user120242, but it does not mutate your input structure, creating a new one instead:

const transform = ({value, ...rest}) => 
  Array .isArray (value)
    ? {...rest, children: value .map (transform)}
    : {...rest, value}

const data = [{name: "info", type: "Object", value: [{name: "app", type: "Object", value: [{path: "info.app", name: "encoding", type: "TEXT", value: "@project.build.sourceEncoding@"}, {name: "java", type: "Object", value: [{path: "info.app.java", name: "source", type: "TEXT", value: "@java.version@"}, {path: "info.app.java", name: "target", type: "TEXT", value: "java.version@"}]}]}]}]

console .log (data .map (transform))

Update

Borrowing a technique from sivako, we can simplify this nicely:

const transform = ({value, ...rest}) => ({
  ... rest, 
  ... (Array .isArray (value) ? {children: value .map (transform)} : {value})
})

const data = [{name: "info", type: "Object", value: [{name: "app", type: "Object", value: [{path: "info.app", name: "encoding", type: "TEXT", value: "@project.build.sourceEncoding@"}, {name: "java", type: "Object", value: [{path: "info.app.java", name: "source", type: "TEXT", value: "@java.version@"}, {path: "info.app.java", name: "target", type: "TEXT", value: "java.version@"}]}]}]}]

console .log (data .map (transform))

Dmitry Reutov · Accepted Answer · 2020-06-11 15:18:09Z

0

An easiest way is just replace all "value": [ to "children": [ after stringify

function convertConfigJson(data) {
  const configData = JSON.parse(JSON.stringify(data).replace(/"value":\[/g, '"children":['));
  return configData
}

also you can go one by one through all keys of nested object, and replace value keys with array in value to children

answered Jun 11, 2020 at 15:18

Dmitry Reutov

3,0321 gold badge9 silver badges22 bronze badges

3 Comments

matvs Over a year ago

This solution has a drawback, that it will also replace words "value" if they are in value of any key of this object.

Dmitry Reutov Over a year ago

@matvs, no, because square brackets are included...for ts structure it is okay but as universal solution it should not be used as this, i just suggested the most simple way in sense of code. But solution with loop over all elements is more reasonable of course

Puneet Bhandari Over a year ago

Thanks @DmitryReutov, i need a way with recursive method call, i wight need to update other properties or object structure

Collectives™ on Stack Overflow

Convert array in to specific format recursively

4 Answers 4

6 Comments

3 Comments

Update

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

3 Comments

Update

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related