简体   繁体   English

将多层次父子关系转换为数组(树)-JavaScript或jQuery

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

在此处输入图片说明

    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. 在这个地方,相同的ID被替换。 polyhierarchy having id is 449. when add to dictionary it is replaced. ID为449的多层次结构。添加到字典中时被替换。

Tree structure should be 树的结构应该是
1. BEHIND A COMMON MEAL: POLYPHENOLS IN FOOD 1.常见的一餐:食物中的多酚
polyhierarchy 多层次
2. this is test 2.这是测试
polyhierarchy 多层次
hello 你好
hi 你好
polyhierarchy 多层次

i need array with parent, child relationship. 我需要与父母,孩子的关系数组。

There are a few mistakes. 有一些错误。

You have duplicate id's for your polyhierarchie element. 您的多层次元素有重复的ID。 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. 因为您正在构建用于查找ID的字典,所以您在第二次或以后将子元素添加到对象中时会覆盖子元素。

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

You have non existant parentIds. 您没有不存在的parentId。

{
    "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)) 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM