Json using hierarchial tree using javascript

Question

I have a JSON array.I try to Convert nested hierarchical tree.But it didn't work. I need a hierarchical tree using this JSON.

Here is my data:

[{
    "_id" : "59b65ee33af7a11a3e3486c2",
    "C_TITLE" : "Sweet and Snacks",
    "C_PARENT" : "0",
    "C_ICON" : "",
    "C_IMAGE" : "59b65ee33af7a11a3e3486c2_sweets.jpg",
    "C_STATUS" : "Active"
}
{
    "_id" : "59b663d709da571dc3d79f49",
    "C_TITLE" : "Groceries",
    "C_PARENT" : "0",
    "C_ICON" : "",
    "C_IMAGE" : "59b663d709da571dc3d79f49_grocery.jpg",
    "C_STATUS" : "Active"
},
{
    "_id" : "59b6648209da571dc3d79f4a",
    "C_TITLE" : "Dals & Pulses",
    "C_PARENT" : "59b663d709da571dc3d79f49",
    "C_ICON" : "",
    "C_IMAGE" : "59b6648209da571dc3d79f4a_dals.jpg",
    "C_STATUS" : "Active"
},
{
    "_id" : "59b6657509da571dc3d79f4c",
    "C_TITLE" : "Rice & Rice products",
    "C_PARENT" : "59b663d709da571dc3d79f49",
    "C_ICON" : "",
    "C_IMAGE" : "59b6657509da571dc3d79f4c_rice.jpg",
    "C_STATUS" : "Active"
}]

I need like this output

[
    {
        " _id" : "59b65ee33af7a11a3e3486c2",
        "C_TITLE" : "Sweet and Snacks",
        "C_PARENT" : "0",
        "C_ICON" : "",
        "C_IMAGE" : "59b65ee33af7a11a3e3486c2_sweets.jpg",
        "C_STATUS" : "Active",
        children:[]


    }
   ]

Based on check C_PARENT and _id.

[ { " _id" : "59b65ee33af7a11a3e3486c2", "C_TITLE" : "Sweet and Snacks", "C_PARENT" : "0", "C_ICON" : "", "C_IMAGE" : "59b65ee33af7a11a3e3486c2_sweets.jpg", "C_STATUS" : "Active", children:{ " _id" : "ghhgfhfhhhg", "C_TITLE" : "Sweet and Snacks", "C_PARENT" : "59b65ee33af7a11a3e3486c2", "C_ICON" : "", "C_IMAGE" : "59b65ee33af7a11a3e3486c2_sweets.jpg", "C_STATUS" : "Active", } } ] — sarankani, Sep 14 '17 at 11:03
you should update the expected the output in the question it's better for us to see @sarankani — Ahmed Can Unbay, Sep 14 '17 at 11:04
Already answered here: [Build tree array from flat array in javascript](https://stackoverflow.com/a/18018037/492258) — asdf_enel_hak, Sep 14 '17 at 11:07

score 0 · Answer 1 · answered Sep 14 '17 at 11:07

0

Basically, you need instead of

o[a.id]

this

o[a._id]

because your data have _id as key id.

The other problem is the stric comparison with root, there you need the a string as value '0', because that is the value you have.

var data = [{ _id: "59b65ee33af7a11a3e3486c2", C_TITLE: "Sweet and Snacks", C_PARENT: "0", C_ICON: "", C_IMAGE: "59b65ee33af7a11a3e3486c2_sweets.jpg", C_STATUS: "Active" }, { _id: "59b663d709da571dc3d79f49", C_TITLE: "Groceries", C_PARENT: "0", C_ICON: "", C_IMAGE: "59b663d709da571dc3d79f49_grocery.jpg", C_STATUS: "Active" }, { _id: "59b6648209da571dc3d79f4a", C_TITLE: "Dals & Pulses", C_PARENT: "59b663d709da571dc3d79f49", C_ICON: "", C_IMAGE: "59b6648209da571dc3d79f4a_dals.jpg", C_STATUS: "Active" }, { _id: "59b6657509da571dc3d79f4c", C_TITLE: "Rice & Rice products", C_PARENT: "59b663d709da571dc3d79f49", C_ICON: "", C_IMAGE: "59b6657509da571dc3d79f4c_rice.jpg", C_STATUS: "Active" }],
    result = function (array, root) {
        var r = [], o = {};
        array.forEach(function (a) {
            a.children = o[a._id] && o[a._id].children; // change to a._id
            o[a._id] = a;                               // change to a._id
            if (a.C_PARENT === root) {                  // strict comparison!
                r.push(a);
                return;
            }
            o[a.C_PARENT] = o[a.C_PARENT] || {};
            o[a.C_PARENT].children = o[a.C_PARENT].children || [];
            o[a.C_PARENT].children.push(a);
        });
        return r;
    }(data, "0");                                       // "0" as root

console.log(result);

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

answered Sep 14 '17 at 11:07

Nina Scholz

376,160
25
347
392

I doubt this is working for an unsorted multilevel tree. – bluehipy Sep 14 '17 at 11:11
@bluehipy, it is working for any sorted raw data, because of the object `o` which keeps all references to the nodes. – Nina Scholz Sep 14 '17 at 11:12
@bluehipy, you may have a look [here](https://stackoverflow.com/a/37806854/1447675), how that function is working. – Nina Scholz Sep 14 '17 at 11:26
I know how it is working... you are using `o` to "remember" all the nodes by id and speculate the `javascript` statical reference of objects so anything that you push in `children` is reflected in the output tree. I just wanted to point out that the initial data has to be **sorted** by id in a manner that parents have to be declared before children. – bluehipy Sep 14 '17 at 11:35
no, the data has not to be sorted in advance, you could try it with different sortings. – Nina Scholz Sep 14 '17 at 11:36
I think variable "o" is used as shallow copy of objects, which results in variable "r" to reflect in both places.. right ?? – Selvakumar Sep 14 '17 at 11:42
@Selvakumar, right `r` contains only root nodes, whereas `o` contains all nodes. – Nina Scholz Sep 14 '17 at 11:46
very good logic.. learnt something new today, I thought of using two loops for this, but this solution used only a single loop – Selvakumar Sep 14 '17 at 11:53
@NinaScholz>I am using ypescript.It's not wrk. – sarankani Sep 15 '17 at 05:06
@sarankani, i dont know *ypescript*. – Nina Scholz Sep 15 '17 at 12:10

Json using hierarchial tree using javascript

1 Answers1