Convert array of Hierarchical paths to JSON

Question

I have a list of paths with ids and I need to convert it into complete JSON object.

I'm trying to convert this:

 [
        {
            "id": 1,
            "name": "Electronics",
            "path": "Electronics"
        },
        {
            "id": 2,
            "name": "Laptops & PC",
            "path": "Electronics > Laptops & PC"
        },
        {
            "id": 7,
            "name": "Phones & Accessories",
            "path": "Electronics > Phones & Accessories"
        },
        {
            "id": 8,
            "name": "Smartphones",
            "path": "Electronics > Phones & Accessories > Smartphones"
        },
        {
            "id": 9,
            "name": "Android",
            "path": "Electronics > Phones & Accessories > Smartphones > Android"
        },
        {
            "id": 10,
            "name": "iOS",
            "path": "Electronics > Phones & Accessories > Smartphones > iOS"
        }
    ]

to something like this:

let output = [
  {'Electronics' : {id: 1, name: "electronics", path: "electronics", children: [
        {'Laptops & PC' : {id: 2, name: "Laptops & PC",path: "Electronics > Laptops & PC", children: []}},
        {'Phone & Accessories': {id: 7, name: "Phones & Accessories", path: "Electronics > Phones & Accessories", children: [
              {'Smartphones': {id: 8, name: "Smartphones", path: "Electronics > Phones & Accessories > Smartphones", children: [
                    {'Android': {id: 9, name: "Android", path: "Electronics > Phones & Accessories > Smartphones > Android", children: []}},
                    {'iOS': {id: 10, name: 'iOS', path: "Electronics > Phones & Accessories > Smartphones > iOS", children: []}}
                  ]
                }}
            ]}}
      ]}}
];

I got a solution similar to this on Stackoverflow (How to convert an array of paths into JSON structure?) But I couldn't add extra properties to the object using those answers.

Can somebody please help me?

Is there any reason why you don't want to keep the flat list? You could simply operate on the paths directly: every descendant element of a given path has a common prefix path (e.g. all descendants of 'Electronics' have the common path prefix 'Electronics >'). — FK82
– FK82, Commented Aug 25, 2018 at 10:41

wiesion · Accepted Answer · 2018-08-25 10:27:42Z

3

I think the targeted structure of [{key: data},{key: data},..] is a bit overkill, i would just go for [data,data,..] - which can easily be achieved by splitting the path of each item and moving the result scope iteratively:

var data =  [
        {
            "id": 1,
            "name": "Electronics",
            "path": "Electronics"
        },
        {
            "id": 2,
            "name": "Laptops & PC",
            "path": "Electronics > Laptops & PC"
        },
        {
            "id": 7,
            "name": "Phones & Accessories",
            "path": "Electronics > Phones & Accessories"
        },
        {
            "id": 8,
            "name": "Smartphones",
            "path": "Electronics > Phones & Accessories > Smartphones"
        },
        {
            "id": 9,
            "name": "Android",
            "path": "Electronics > Phones & Accessories > Smartphones > Android"
        },
        {
            "id": 10,
            "name": "iOS",
            "path": "Electronics > Phones & Accessories > Smartphones > iOS"
        },
        {
            "id": 11,
            "name": "Software",
            "path": "Software"
        },
        {
            "id": 12,
            "name": "Office",
            "path": "Software > Office"
        }
    ],
    result = [];

data.forEach(item => {
  var path = item.path.split(" > "),
      scope = result;
  path.forEach(key => {
    var match = scope.find(obj => obj.name === key);
    if(match === undefined) {
      var child = {
        "id": item.id,
        "name": item.name,
        "path": item.path,
        "children": []
      };
      scope.push(child);
      scope = child.children;
    } else {
      scope = match.children;
    }
  });
});

console.log(result);

answered Aug 25, 2018 at 10:27

wiesion

2,48515 silver badges22 bronze badges

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

3 Comments

wiesion Over a year ago

If you really need the [{key: data},{key: data},..] let me know, no big deal to change the code to get that output.

Dev Aggarwal Over a year ago

Thanks for the answer! I wanted to keep it simple but wasn't sure if `[data, data..] would work. And It surely does!

Dev Aggarwal Over a year ago

Accepting since it's simpler to understand.

Amit Wagner · Accepted Answer · 2018-08-25 10:32:23Z

you can do it with recursive function to support unlimited children.

 const input = [
        {
            "id": 1,
            "name": "Electronics",
            "path": "Electronics"
        },
        {
            "id": 2,
            "name": "Laptops & PC",
            "path": "Electronics > Laptops & PC"
        },
        {
            "id": 7,
            "name": "Phones & Accessories",
            "path": "Electronics > Phones & Accessories"
        },
        {
            "id": 8,
            "name": "Smartphones",
            "path": "Electronics > Phones & Accessories > Smartphones"
        },
        {
            "id": 9,
            "name": "Android",
            "path": "Electronics > Phones & Accessories > Smartphones > Android"
        },
        {
            "id": 10,
            "name": "iOS",
            "path": "Electronics > Phones & Accessories > Smartphones > iOS"
        }
    ]
    
    const output = {}
    const pushToOutput = (path,obj,value) =>{
    const clone = {...value}
    const key = path[0];
        if(obj[key] === undefined){
            obj[key] =clone
            obj[key].children = {};
        }
       path.shift()
       if(path.length > 0){
            return pushToOutput(path,obj[key].children,clone)
       }
       obj[key] = clone

    }
    input.forEach(value=>{
       const path =  value.path.split(" > ")
       pushToOutput(path,output,value)
    })
    
    console.log(output)

Gaurav Mourya · Accepted Answer · 2018-08-25 10:05:29Z

-1

Use code to convert object to json string.If you are trying create a hierarchical object as below you will need json string which could be parsed through js.

With the object abocve cannot generate the json object as below. It is totally different structure.

    <script>
var a=[
  {'Electronics' : {id: 1, name: "electronics", path: "electronics", children: [
        {'Laptops & PC' : {id: 2, name: "Laptops & PC",path: "Electronics > Laptops & PC", children: []}},
        {'Phone & Accessories': {id: 7, name: "Phones & Accessories", path: "Electronics > Phones & Accessories", children: [
              {'Smartphones': {id: 8, name: "Smartphones", path: "Electronics > Phones & Accessories > Smartphones", children: [
                    {'Android': {id: 9, name: "Android", path: "Electronics > Phones & Accessories > Smartphones > Android", children: []}},
                    {'iOS': {id: 10, name: 'iOS', path: "Electronics > Phones & Accessories > Smartphones > iOS", children: []}}
                  ]
                }}
            ]}}
      ]}}
];
console.log(JS.stringify(a));
</script>

edited Aug 25, 2018 at 10:05

answered Aug 25, 2018 at 9:54

Gaurav Mourya

1776 bronze badges

4 Comments

Baboo Over a year ago

This doesnt answer the question

Gaurav Mourya Over a year ago

What you exactly want. You are saying to get second json object from first one !! Is it.

Baboo Over a year ago

That's not my question. @Dev Aggarwal is asking to convert an array structure into a nested object, not to parse an array into JSON ;)

Gaurav Mourya Over a year ago

There should be a parent_id key in the first object in every sub array that it can be hierarchically arranged or it will need to arrange from path key.

Collectives™ on Stack Overflow

Convert array of Hierarchical paths to JSON

3 Answers 3

3 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related