Json Data to Nested Json data

Question

I'm new to Jquery , can anyone help me out or tell me how to handle this, i tried with some other examples but i didn't get them.

var arr = [
            { PARENTNODE: "Resource Management", CHILDNODE: "ManPower", OPERATIONNAME: "Update" },
            { PARENTNODE: "Resource Management", CHILDNODE: "Manpower", OPERATIONNAME: "View" },
            { PARENTNODE: "Resource Management", CHILDNODE: "ManPower", OPERATIONNAME: "Delete" },
            { PARENTNODE: "Resource Management", CHILDNODE: "Manpower", OPERATIONNAME: "Insert" },
            { PARENTNODE: "Resource Management", CHILDNODE: "Vehicles", OPERATIONNAME: "Update" },
            { PARENTNODE: "Resource Management", CHILDNODE: "Vehicles", OPERATIONNAME: "View" },
            { PARENTNODE: "Resource Management", CHILDNODE: "Vehicles", OPERATIONNAME: "Insert" },
            { PARENTNODE: "Resource Management", CHILDNODE: "Vehicles", OPERATIONNAME: "Delete" },
            { PARENTNODE: "Contacts", CHILDNODE: "Customers", OPERATIONNAME: "Update" },
            { PARENTNODE: "Contacts", CHILDNODE: "Customers", OPERATIONNAME: "View" },
            { PARENTNODE: "Contacts", CHILDNODE: "Customers", OPERATIONNAME: "Insert" },
            { PARENTNODE: "Contacts", CHILDNODE: "Customers", OPERATIONNAME: "Delete" }
          ],

I need to convert this json data to nested data like this,

[{
    text: "Resource Management",
    items: [{
        text: "Manpower",           
        items: [{
            text: "Update",
        }, {
            text: "Delete",
        }, {
            text: "Insert",
        }, {
            text: "View",
        }]
    }, {
        text: "Vehicles",
        items: [{
            text: "Update",
        }, {
            text: "Delete",
        }, {
            text: "Insert",
        }, {
            text: "View",
        }]
    }]        
}, {
    text: "Contacts",
    items: [{
        text: "Manage Customers",
        items: [{
            text: "Update",
        }, {
            text: "Delete",
        }, {
            text: "Insert",
        }, {
            text: "View",
        }]
    }]
}]

Thanks in advance! Please help me out.

Have you tried anything so far?

codingrose
– codingrose

2016-12-02 07:19:08 +00:00
Commented Dec 2, 2016 at 7:19 — codingrose
– codingrose, Commented Dec 2, 2016 at 7:19
Can you also explain the group by criteria?

GiuServ
– GiuServ

2016-12-02 07:19:57 +00:00
Commented Dec 2, 2016 at 7:19 — GiuServ
– GiuServ, Commented Dec 2, 2016 at 7:19

soywod · Accepted Answer · 2016-12-02 13:47:43Z

In pure js (a little primitive, better solutions are welcomed) :

var arr = [
    { PARENTNODE: "Resource Management", CHILDNODE: "ManPower", OPERATIONNAME: "Update" },
    { PARENTNODE: "Resource Management", CHILDNODE: "Manpower", OPERATIONNAME: "View" },
    { PARENTNODE: "Resource Management", CHILDNODE: "ManPower", OPERATIONNAME: "Delete" },
    { PARENTNODE: "Resource Management", CHILDNODE: "Manpower", OPERATIONNAME: "Insert" },
    { PARENTNODE: "Resource Management", CHILDNODE: "Vehicles", OPERATIONNAME: "Update" },
    { PARENTNODE: "Resource Management", CHILDNODE: "Vehicles", OPERATIONNAME: "View" },
    { PARENTNODE: "Resource Management", CHILDNODE: "Vehicles", OPERATIONNAME: "Insert" },
    { PARENTNODE: "Resource Management", CHILDNODE: "Vehicles", OPERATIONNAME: "Delete" },
    { PARENTNODE: "Contacts", CHILDNODE: "Customers", OPERATIONNAME: "Update" },
    { PARENTNODE: "Contacts", CHILDNODE: "Customers", OPERATIONNAME: "View" },
    { PARENTNODE: "Contacts", CHILDNODE: "Customers", OPERATIONNAME: "Insert" },
    { PARENTNODE: "Contacts", CHILDNODE: "Customers", OPERATIONNAME: "Delete" }
];

var output = [];

arr.forEach(function(item) {
    var indexParentNode = addItem(item.PARENTNODE, output);
    var indexChildNode = addItem(item.CHILDNODE, output[indexParentNode].items);
    addItem(item.OPERATIONNAME, output[indexParentNode].items[indexChildNode].items, true);
});

function addItem(item, arr, withNoItems) {
    var index = indexOf(item, arr);
    var tpl = {text: item, items: []};

    if (!! withNoItems) delete tpl.items;

    if (index === -1) {
        arr.push(tpl);
        return arr.length - 1;
    }
    else {
        return index;
    }
}

function indexOf(needle, haystack) {
    var i = 0;

    while (i < haystack.length) {
        if (haystack[i].text === needle) return i;
        i++;
    }

    return -1;
}

console.log(output);

Nerdwood · Accepted Answer · 2016-12-05 02:04:26Z

0

Not the most elegant solution, but here's a starting point:

<script type="text/javascript">
    'use strict';

    var arr = [
            { PARENTNODE: "Resource Management", CHILDNODE: "ManPower", OPERATIONNAME: "Update" },
            { PARENTNODE: "Resource Management", CHILDNODE: "Manpower", OPERATIONNAME: "View" },
            { PARENTNODE: "Resource Management", CHILDNODE: "ManPower", OPERATIONNAME: "Delete" },
            { PARENTNODE: "Resource Management", CHILDNODE: "Manpower", OPERATIONNAME: "Insert" },
            { PARENTNODE: "Resource Management", CHILDNODE: "Vehicles", OPERATIONNAME: "Update" },
            { PARENTNODE: "Resource Management", CHILDNODE: "Vehicles", OPERATIONNAME: "View" },
            { PARENTNODE: "Resource Management", CHILDNODE: "Vehicles", OPERATIONNAME: "Insert" },
            { PARENTNODE: "Resource Management", CHILDNODE: "Vehicles", OPERATIONNAME: "Delete" },
            { PARENTNODE: "Contacts", CHILDNODE: "Customers", OPERATIONNAME: "Update" },
            { PARENTNODE: "Contacts", CHILDNODE: "Customers", OPERATIONNAME: "View" },
            { PARENTNODE: "Contacts", CHILDNODE: "Customers", OPERATIONNAME: "Insert" },
            { PARENTNODE: "Contacts", CHILDNODE: "Customers", OPERATIONNAME: "Delete" }
             ];

    function getOrCreateListItem(list, searchItemName)
    {
        var newItem = null;

        //Get item if it's already in the list
        for (var item of list) {
            if (item.text == searchItemName) {
                newItem = item;
                break;
            }
        }

        //If no item found, create new item
        if (!newItem) {
            list.push({
                text: searchItemName,
                items: []
            });
            newItem = list[list.length-1];
        }

        return newItem;
    }

    var newData = [];

    for (var item of arr) {

        //Get parent item
        var parent = getOrCreateListItem(newData, item.PARENTNODE);

        //Get child item
        var child = getOrCreateListItem(parent.items, item.CHILDNODE);

        //Add child item data
        child.items.push({text: item.OPERATIONNAME});
    }

    console.log(newData);

</script>

edited Dec 5, 2016 at 2:04

answered Dec 2, 2016 at 7:56

Nerdwood

4,0821 gold badge25 silver badges20 bronze badges

2 Comments

Ravi Kumar Over a year ago

Thanks @nerdword, getting operation name in childnode items But i'm getting the child nodes outside the parent items.

Nerdwood Over a year ago

@RaviKumar I've just changed the code sample to work with arrays instead of objects primarily (manually searching to find an existing item in the list). This will give you a much closer result.

Collectives™ on Stack Overflow

Json Data to Nested Json data

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related