Hierarchical Tree using Unordered array

Question

I have an unordered array. id is a unique value.parent is id of parent. I need a Hierarchical JSON.

var C=[
        {
        "id": 57,
        "name": "Breaded Chicken Items",
        "slug": "breaded-chicken-items",
        "parent": 55,
        "description": "",
        "display": "default",
        "image": "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-2.jpg",
        "count": 0
        },
        {
        "id": 70,
        "name": "Curry Masala Blends",
        "slug": "curry-masala-blends",
        "parent": 69,
        "description": "",
        "display": "default",
        "image": "http://coitor.com/emke/wp-content/uploads/2016/04/purto-probatus.jpg",
        "count": 0
        },
        {
        "id": 55,
        "name": "Fish | Meat | Frozen Veg",
        "slug": "fish-meat-frozen-veg",
        "parent": 0,
        "description": "",
        "display": "default",
        "image": "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-2.jpg",
        "count": 0
        },
        {
        "id": 186,
        "name": "Frozen Veg",
        "slug": "frozen-veg",
        "parent": 55,
        "description": "",
        "display": "default",
        "image": "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-1.jpg",
        "count": 0
        },
        {
        "id": 69,
        "name": "Spices | Curry Powders",
        "slug": "spices-curry-powders",
        "parent": 0,
        "description": "",
        "display": "default",
        "image": "http://coitor.com/emke/wp-content/uploads/2016/04/rsz_birds_eye_chilli.jpg",
        "count": 0
        },
        {
        "id": 47,
        "name": "Vegetables",
        "slug": "vegetables",
        "parent": 0,
        "description": "",
        "display": "subcategories",
        "image": "http://coitor.com/emke/wp-content/uploads/2016/04/wisi-antiopam.jpg",
        "count": 15
        },
        {
        "id": 72,
        "name": "Whole Spices",
        "slug": "whole-spices",
        "parent": 69,
        "description": "",
        "display": "default",
        "image": "http://coitor.com/emke/wp-content/uploads/2016/04/fresh-greenpeas.jpg",
        "count": 0
        }
        ]

Like this output

  [{
    "id": 55,
    "name": "Fish | Meat | Frozen Veg",
    "slug": "fish-meat-frozen-veg",
    "parent": 0,
    "description": "",
    "display": "default",
    "image": "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-2.jpg",
    "count": 0
    "Children":[
         {
            "id": 57,
            "name": "Breaded Chicken Items",
            "slug": "breaded-chicken-items",
            "parent": 55,
            "description": "",
            "display": "default",
            "image": "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-2.jpg",
            "count": 0
         }
     ]
   }]..etc

I have no idea.

Nina Scholz · Accepted Answer · 2017-08-03 09:10:04Z

You could use a single loop approach by using both information of id and parent for generating nodes in an object.

If a node is found without parent, then the node is a root node and added to the result array.

var data = [{ id: 57, name: "Breaded Chicken Items", slug: "breaded-chicken-items", parent: 55, description: "", display: "default", image: "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-2.jpg", count: 0 }, { id: 70, name: "Curry Masala Blends", slug: "curry-masala-blends", parent: 69, description: "", display: "default", image: "http://coitor.com/emke/wp-content/uploads/2016/04/purto-probatus.jpg", count: 0 }, { id: 55, name: "Fish | Meat | Frozen Veg", slug: "fish-meat-frozen-veg", parent: 0, description: "", display: "default", image: "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-2.jpg", count: 0 }, { id: 186, name: "Frozen Veg", slug: "frozen-veg", parent: 55, description: "", display: "default", image: "http://coitor.com/emke/wp-content/uploads/2016/05/mainbanner-1.jpg", count: 0 }, { id: 69, name: "Spices | Curry Powders", slug: "spices-curry-powders", parent: 0, description: "", display: "default", image: "http://coitor.com/emke/wp-content/uploads/2016/04/rsz_birds_eye_chilli.jpg", count: 0 }, { id: 47, name: "Vegetables", slug: "vegetables", parent: 0, description: "", display: "subcategories", image: "http://coitor.com/emke/wp-content/uploads/2016/04/wisi-antiopam.jpg", count: 15 }, { id: 72, name: "Whole Spices", slug: "whole-spices", parent: 69, description: "", display: "default", image: "http://coitor.com/emke/wp-content/uploads/2016/04/fresh-greenpeas.jpg", count: 0 }],
    tree = function (data, root) {
        var r = [], o = {};
        data.forEach(function (a) {
            a.children = o[a.id] && o[a.id].children;
            o[a.id] = a;
            if (a.parent === root) {
                r.push(a);
                return;
            }
            o[a.parent] = o[a.parent] || {};
            o[a.parent].children = o[a.parent].children || [];
            o[a.parent].children.push(a);
        });
        return r;
    }(data, 0);

console.log(tree);

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

Semi-Friends · Accepted Answer · 2017-08-03 09:11:18Z

0

loop through the array using a looping function. then filter the values by its id. something like this

var col;
var result = C.forEach(obj => {
    col = C.filter(item => {
      return item.parent == obj.id
    })
    if (col.length) {
      obj['children'] = col;
    }
})

answered Aug 3, 2017 at 9:11

Semi-Friends

4806 silver badges17 bronze badges

Collectives™ on Stack Overflow

Hierarchical Tree using Unordered array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related