Convert polyhierarchy parent-child relationship to array (tree) - javascript or jquery

Question

    var data = [
{
    "text": "BEHIND A COMMON MEAL: POLYPHENOLS IN FOOD ",
    "id": "445",
    "parentid": ""

},
{
    "text": "2.2 First Course: Pasta With Tomato Sauce (Polyphenols in Wheat Bran and Tomato Byproducts)",
    "id": "441",
    "parentid": "445"

},
{
    "text": "2.3 A Fresh Side Dish: Mixed Salad (Polyphenols From Fennel, Carrot)",
    "id": "442",
    "parentid": "445"

},
{
    "text": "hello mr.sujai",
    "id": "448",
    "parentid": "445"

},
{
    "text": "polyhierarchy",
    "id": "449",
    "parentid": "445"

},
{
    "text": "INTRODUCTION",
    "id": "452",
    "parentid": ""

},
{
    "text": "1.2 The Tight Biochemical Connection Between Vegetables and Their Byproducts",
    "id": "440",
    "parentid": "452"

},
{
    "text": "OTHER OFF-THE-MENU MISCELLANEOUS",
    "id": "454",
    "parentid": ""

},
{
    "text": "SOMETHING TO DRINK",
    "id": "456",
    "parentid": ""

},
{
    "text": "3.1 Orange Juice (Polyphenols From Orange Byproducts)",
    "id": "443",
    "parentid": "456"

},
{
    "text": "3.2 Wine (Polyphenols From Grape and Wine Byproducts)",
    "id": "444",
    "parentid": "456"

},
{
    "text": "understandings",
    "id": "451",
    "parentid": "456"

},
{
    "text": "Polyphenols",
    "id": "453",
    "parentid": "451"

},
{
    "text": "this is test",
    "id": "458",
    "parentid": "455"
},
{
    "text": "polyhierarchy",
    "id": "449",
    "parentid": "458"
},
{
    "text": "hello",
    "id": "447",
    "parentid": "449"
},
{
    "text": "hi",
    "id": "459",
    "parentid": "447"
},
{
    "text": "polyhierarchy",
    "id": "449",
    "parentid": "459"
},
{
    "text": "testing",
    "id": "457",
    "parentid": "458"
},
{
    "text": "hi test",
    "id": "450",
    "parentid": "457"
},
{
    "text": "speech",
    "id": "446",
    "parentid": "450"
}]

        function jsonTree() {

            // Keep a fast lookup dictionary
            var dictionary = {};
            for (var i = 0; i < data.length; i++) {
                dictionary[data[i].id] = data[i];
            }

            for (var i = 0; i < data.length; i++) {
                if (data[i].parentid == 449) {
                    var test = "";
                }
                if (data[i].parentid) {

                    var parent = dictionary[data[i].parentid];
                    arrData = parent;
                    if (parent) {
                        if (!parent.children) {
                            parent.children = [];
                        }
                        parent.children.push(data[i]);
                        //  arrData.children.push(data[i]);
                    }

                }
                }
                var arrData = [];
                for (var i = 0; i < data.length; i++) {
                    if (data[i].parentid == 455) {
                        arrData.push(data[i]);
                    }
                }
                document.getElementById("test").innerHTML = JSON.stringify(arrData);
                return false;
            }

polyhierarchy term having different parent.

 for (var i = 0; i < data.length; i++) {
            dictionary[data[i].id] = data[i];
        }

in this place same id is replaced. polyhierarchy having id is 449. when add to dictionary it is replaced.

Tree structure should be
1. BEHIND A COMMON MEAL: POLYPHENOLS IN FOOD
polyhierarchy
2. this is test
polyhierarchy
hello
hi
polyhierarchy

i need array with parent, child relationship.

A similar question and a possible solution here stackoverflow.com/questions/32160294/… — jeetaz
– jeetaz, Commented Aug 3, 2018 at 9:07
There is no element with an id '455' although a lot of children have a parentid set to '455' — Moritz Roessler
– Moritz Roessler, Commented Aug 3, 2018 at 9:26

Moritz Roessler · Accepted Answer · 2018-08-03 10:18:53Z

0

There are a few mistakes.

You have duplicate id's for your polyhierarchie element. Because you're building a dictionary to lookup your ids, you're overwriting your child element the second/subsequent time you add it to your object.

{
    "text": "polyhierarchy",
    "id": "449", //<-- duplicate
    "parentid": "459"
}

You have non existant parentIds.

{
    "text": "SOMETHING TO DRINK",
    "id": "456",
    "parentid": "455" // <--- doesn't exist

}

The code got a little more complex than anticipated because of those two issues.

function mapData (data) {
    //build a dictionary for: id -> [eles]
    var map = data.reduce ((obj, ele) =>  { 
        obj[ele.id] = [ //let's make the lookup an array, to support multiple elements with the same id
            ...obj[ele.id] || [], //keep the existing elements or initialize it to an array
            {...ele, children: []}
        ]; 

        return obj
     }, {});

    return Object.keys (map).reduce ((arr, key) => {
        let eles = map [key] || []; //process all elements

        eles.forEach (ele => {
            let parents = map [ele.parentid] || [];
            let parent  = parents [0]; 

            if (!parent) {
                parent = map [ele.parentid] = {children: [], root: true}
            } 

            parent.children.push (ele);

            if (parent.root && !~arr.indexOf (parent)) arr.push (parent);
        });
        return arr;
    },[])
}

console.log (mapData (data))

answered Aug 3, 2018 at 10:18

Moritz Roessler

8,67329 silver badges57 bronze badges

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

3 Comments

Karthik Over a year ago

"parentid": "455" // <--- doesn't exist. please consider it should be empty or 0. when i copy and paste the code it shows error in source page. javascript error. please give executable javascript code.

Moritz Roessler Over a year ago

@Karthik you just have to pass data to mapData

Karthik Over a year ago

when i copy the code and put into aspx page inside script tag, it shows syntax errors .... shall i attach the screenshot of error?

Collectives™ on Stack Overflow

Convert polyhierarchy parent-child relationship to array (tree) - javascript or jquery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related