将多层次父子关系转换为数组（树） - javascript 或 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;
            }

多层次术语具有不同的父级。

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

在这个地方相同的 id 被替换。 id 为 449 的多层次结构。添加到字典时会被替换。

树形结构应该是
1. 普通餐后：食物中的多酚
多层次结构
2. 这是测试
多层次结构
你好
嗨
多层次结构

我需要有父子关系的数组。

Answer 1

有一些错误。

您的多层次元素有重复的 id。因为您正在构建一个字典来查找您的 id，所以您将在第二次/随后将其添加到对象时覆盖您的子元素。

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

您的 parentId 不存在。

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

}

由于这两个问题，代码比预期的要复杂一些。

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