JSON数据到Treeview JavaScript

如何解决JSON数据到Treeview JavaScript

请帮助我通过javascript数组创建treeview。场景是我想用反向级别创建Treeview。例如：

var arr = [{
            "ID": 1,"Phone": "[phone]","City": "Coevorden","Name": "Grady"
        },{
            "ID": 2,"Phone": "[phone]","City": "Chełm","Name": "Scarlet"
        },{
            "ID": 3,"Phone": "[phone]","City": "Wardha","Name": "Adria"
        },{
            "ID": 4,"parentID": 3,"Phone": "[phone]","City": "Villers-la-Loue","Name": "Xerxes"
        },{
            "ID": 5,"Phone": "[phone]","City": "Gönen","Name": "Madeson"
        },{
            "ID": 6,"parentID": 5,"Phone": "[phone]","City": "Timkur","Name": "Rae"
        },{
            "ID": 7,"Phone": "[phone]","City": "Louvain-la-Neuve","Name": "Celeste"
        },{
            "ID": 8,"Phone": "[phone]","City": "Worksop","Name": "Rowan"
        },{
            "ID": 9,"Phone": "[phone]","City": "Bad Neuenahr-Ahrweiler","Name": "Kendall"
        },{
            "ID": 10,"Phone": "[phone]","City": "MIDdelburg","Name": "Madaline"
        },{
            "ID": 11,"Phone": "[phone]","City": "Birecik","Name": "Chandler"
        },{
            "ID": 12,"parentID": 8,"Phone": "[phone]","City": "Courbevoie","Name": "Craig"
        },{
            "ID": 13,"Phone": "[phone]","City": "Cuccaro Vetere","Name": "Basia"
        },{
            "ID": 14,"parentID": 6,"Phone": "[phone]","City": "Portree","Name": "Elmo"
        },{
            "ID": 15,"Phone": "[phone]","City": "Dublin","Name": "Cairo"
        },{
            "ID": 16,"parentID": 11,"Phone": "[phone]","City": "Rivière-du-Loup","Name": "Mannix"
        },{
            "ID": 17,"Phone": "[phone]","City": "Roubaix","Name": "Justine"
        },{
            "ID": 18,"parentID": 14,"Phone": "[phone]","City": "Eugene","Name": "Dahlia"
        },{
            "ID": 19,"Phone": "[phone]","City": "Salisbury","Name": "Irene"
        },{
            "ID": 20,"parentID": 12,"Phone": "[phone]","City": "Garaguso","Name": "Trevor"
        },{
            "ID": 21,"Phone": "[phone]","City": "Pointe-au-Pic","Name": "Iris"
        },{
            "ID": 22,"parentID": 20,"Phone": "[phone]","City": "Salt Lake City","Name": "Fleur"
        },{
            "ID": 23,"parentID": 19,"Phone": "[phone]","City": "Meldert","Name": "Hayley"
        },{
            "ID": 24,"Phone": "[phone]","City": "Corral","Name": "Baker"
        },{
            "ID": 25,"Phone": "[phone]","City": "Joliet","Name": "Leo"
        },{
            "ID": 26,"parentID": 7,"Phone": "[phone]","City": "Burntisland","Name": "Rigel"
        },{
            "ID": 27,"parentID": 21,"Phone": "[phone]","City": "Lac Ste. Anne","Name": "Scarlett"
        },{
            "ID": 28,"parentID": 10,"Phone": "[phone]","City": "San Maurizio Canavese","Name": "Wang"
        },{
            "ID": 29,"Phone": "[phone]","City": "Palermo","Name": "Eagan"
        },{
            "ID": 30,"parentID": 2,"Phone": "[phone]","City": "Harrison Hot Springs","Name": "Hamilton"
        },{
            "ID": 31,"parentID": 26,"Phone": "[phone]","City": "Ottignies","Name": "Liberty"
        },{
            "ID": 32,"Phone": "[phone]","City": "Bihain","Name": "Noel"
        },{
            "ID": 33,"parentID": 27,"Phone": "[phone]","City": "Kapuskasing","Name": "AIDan"
        },{
            "ID": 34,"parentID": 31,"Phone": "[phone]","City": "Buin","Name": "Murphy"
        },{
            "ID": 35,"parentID": 28,"Phone": "[phone]","City": "Gold Coast","Name": "Ila"
        },{
            "ID": 36,"Phone": "[phone]","City": "Castel Maggiore","Name": "Katelyn"
        },{
            "ID": 37,"Phone": "[phone]","City": "Chapecó","Name": "Logan"
        },{
            "ID": 38,"Phone": "[phone]","City": "Stargard Szczeciński",{
            "ID": 39,"Phone": "[phone]","City": "Bad Vöslau","Name": "Katell"
        },{
            "ID": 40,"Phone": "[phone]","City": "Namur","Name": "Lionel"
        },{
            "ID": 41,"Phone": "[phone]","City": "Borchtlombeek","Name": "Erin"
        },{
            "ID": 42,"Phone": "[phone]","City": "Alto del Carmen","Name": "Austin"
        },{
            "ID": 43,"Phone": "[phone]","City": "Saint-Laurent","Name": "Deanna"
        },{
            "ID": 44,"parentID": 4,"Phone": "[phone]","City": "Fiuminata","Name": "Darius"
        },{
            "ID": 45,"Phone": "[phone]","City": "Laurencekirk","Name": "Kelsey"
        },{
            "ID": 46,"Phone": "[phone]","City": "Lunel","Name": "Skyler"
        },{
            "ID": 47,"parentID": 44,"Phone": "[phone]","City": "Pontedera","Name": "Harding"
        },{
            "ID": 48,"parentID": 18,"Phone": "[phone]","City": "WIDooie","Name": "Marny"
        },{
            "ID": 49,"Phone": "[phone]","City": "Zamora","Name": "Brennan"
        },{
            "ID": 50,"parentID": 35,"Phone": "[phone]","City": "Hazaribag","Name": "Lance"
        }]

，并且我尝试按以下顺序创建树形视图： 预期的输出例如：

[
    {
        "ID": 1,"Name": "Grady"
    },{
        "ID": 2,"Name": "Scarlet","children": [
            {
                "ID": 30,"Name": "Hamilton","children": [
                    {
                        "ID": 54,"parentID": 30,"Phone": "[phone]","City": "Ribnitz-Damgarten","Name": "Kelsie","children": [
                            {
                                "ID": 62,"parentID": 54,"Phone": "[phone]","City": "Biała Podlaska","Name": "Clio"
                            }
                        ]
                    },{
                        "ID": 87,"Phone": "[phone]","City": "Piracicaba","Name": "Maya"
                    }
                ]
            },{
                "ID": 40,"Name": "Lionel"
            },{
                "ID": 43,"Name": "Deanna","children": [
                    {
                        "ID": 63,"parentID": 43,"Phone": "[phone]","City": "Nicoya","Name": "Nola"
                    },{
                        "ID": 98,"Phone": "[phone]","City": "San Marcello Pistoiese","Name": "Marny"
                    }
                ]
            }
        ]
    },{
        "ID": 3,"Name": "Adria","children": [
            {
                "ID": 4,"Name": "Xerxes","children": [
                    {
                        "ID": 44,"Name": "Darius","children": [
                            {
                                "ID": 47,"Name": "Harding","children": [
                                    {
                                        "ID": 92,"parentID": 47,"Phone": "[phone]","City": "Curacaví","Name": "Aristotle"
                                    }
                                ]
                            }
                        ]
                    },{
                        "ID": 56,"Phone": "[phone]","City": "Gore","Name": "Rafael"
                    }
                ]
            },{
                "ID": 58,"Phone": "[phone]","City": "Curepto","Name": "Leila"
            }
        ]
    }]

我以这个输出为例。我该怎么做才能得到这样的数据输出？

解决方法

        tree = function(array) {
        var o = {
            ID: 0
        }

        function arrGet(o) {
            if (Array.isArray(o.children)) {
                o.children.forEach(arrGet);
            }
        }
        array.forEach(function(a) {
            o[a.ID] = o[a.ID] || {
                ID: a.ID,parentID: a.parentID,Phone: a.Phone,City: a.City,Name: a.Name
            };
            a.children = o[a.ID].children;
            o[a.parentID] = o[a.parentID] || {
                ID: a.parentID
            };
            o[a.parentID].children = o[a.parentID].children || [];
            o[a.parentID].children.push(o[a.ID]);
        });
        arrGet(o[0]);
        return o[0].children;
    }(arr);
console.log('<pre>' + JSON.stringify(tree,4) + '</pre>');

我用此代码获得结果，但是对于没有父ID的对象，错误返回。 我必须使用此代码向没有parentID的对象手动写入parentID = 0。

,

您可以采用一个标准方法，即一个循环，即一个用于收集ID和parentID的密钥和动态密钥的对象。

const
    getTree = (array,root,key,parent) => array.reduce((t,o) => {
        [[o[parent],{}],['children',[]]]
            .reduce((o,[k,v]) => o[k] = o[k] || v,t)
            .push(Object.assign(t[o[key]] = t[o[key]] || {},o));
        return t;
    },{})[root].children,data = [{ ID: 1,Phone: "[phone]",City: "Coevorden",Name: "Grady" },{ ID: 2,Phone: "[phone]",City: "Chełm",Name: "Scarlet" },{ ID: 3,Phone: "[phone]",City: "Wardha",Name: "Adria" },{ ID: 4,parentID: 3,Phone: "[phone]",City: "Villers-la-Loue",Name: "Xerxes" },{ ID: 5,Phone: "[phone]",City: "Gönen",Name: "Madeson" },{ ID: 6,parentID: 5,Phone: "[phone]",City: "Timkur",Name: "Rae" },{ ID: 7,Phone: "[phone]",City: "Louvain-la-Neuve",Name: "Celeste" },{ ID: 8,Phone: "[phone]",City: "Worksop",Name: "Rowan" },{ ID: 9,Phone: "[phone]",City: "Bad Neuenahr-Ahrweiler",Name: "Kendall" },{ ID: 10,Phone: "[phone]",City: "MIDdelburg",Name: "Madaline" },{ ID: 11,Phone: "[phone]",City: "Birecik",Name: "Chandler" },{ ID: 12,parentID: 8,Phone: "[phone]",City: "Courbevoie",Name: "Craig" },{ ID: 13,Phone: "[phone]",City: "Cuccaro Vetere",Name: "Basia" },{ ID: 14,parentID: 6,Phone: "[phone]",City: "Portree",Name: "Elmo" },{ ID: 15,Phone: "[phone]",City: "Dublin",Name: "Cairo" },{ ID: 16,parentID: 11,Phone: "[phone]",City: "Rivière-du-Loup",Name: "Mannix" },{ ID: 17,Phone: "[phone]",City: "Roubaix",Name: "Justine" },{ ID: 18,parentID: 14,Phone: "[phone]",City: "Eugene",Name: "Dahlia" },{ ID: 19,Phone: "[phone]",City: "Salisbury",Name: "Irene" },{ ID: 20,parentID: 12,Phone: "[phone]",City: "Garaguso",Name: "Trevor" },{ ID: 21,Phone: "[phone]",City: "Pointe-au-Pic",Name: "Iris" },{ ID: 22,parentID: 20,Phone: "[phone]",City: "Salt Lake City",Name: "Fleur" },{ ID: 23,parentID: 19,Phone: "[phone]",City: "Meldert",Name: "Hayley" },{ ID: 24,Phone: "[phone]",City: "Corral",Name: "Baker" },{ ID: 25,Phone: "[phone]",City: "Joliet",Name: "Leo" },{ ID: 26,parentID: 7,Phone: "[phone]",City: "Burntisland",Name: "Rigel" },{ ID: 27,parentID: 21,Phone: "[phone]",City: "Lac Ste. Anne",Name: "Scarlett" },{ ID: 28,parentID: 10,Phone: "[phone]",City: "San Maurizio Canavese",Name: "Wang" },{ ID: 29,Phone: "[phone]",City: "Palermo",Name: "Eagan" },{ ID: 30,parentID: 2,Phone: "[phone]",City: "Harrison Hot Springs",Name: "Hamilton" },{ ID: 31,parentID: 26,Phone: "[phone]",City: "Ottignies",Name: "Liberty" },{ ID: 32,Phone: "[phone]",City: "Bihain",Name: "Noel" },{ ID: 33,parentID: 27,Phone: "[phone]",City: "Kapuskasing",Name: "AIDan" },{ ID: 34,parentID: 31,Phone: "[phone]",City: "Buin",Name: "Murphy" },{ ID: 35,parentID: 28,Phone: "[phone]",City: "Gold Coast",Name: "Ila" },{ ID: 36,Phone: "[phone]",City: "Castel Maggiore",Name: "Katelyn" },{ ID: 37,Phone: "[phone]",City: "Chapecó",Name: "Logan" },{ ID: 38,Phone: "[phone]",City: "Stargard Szczeciński",{ ID: 39,Phone: "[phone]",City: "Bad Vöslau",Name: "Katell" },{ ID: 40,Phone: "[phone]",City: "Namur",Name: "Lionel" },{ ID: 41,Phone: "[phone]",City: "Borchtlombeek",Name: "Erin" },{ ID: 42,Phone: "[phone]",City: "Alto del Carmen",Name: "Austin" },{ ID: 43,Phone: "[phone]",City: "Saint-Laurent",Name: "Deanna" },{ ID: 44,parentID: 4,Phone: "[phone]",City: "Fiuminata",Name: "Darius" },{ ID: 45,Phone: "[phone]",City: "Laurencekirk",Name: "Kelsey" },{ ID: 46,Phone: "[phone]",City: "Lunel",Name: "Skyler" },{ ID: 47,parentID: 44,Phone: "[phone]",City: "Pontedera",Name: "Harding" },{ ID: 48,parentID: 18,Phone: "[phone]",City: "WIDooie",Name: "Marny" },{ ID: 49,Phone: "[phone]",City: "Zamora",Name: "Brennan" },{ ID: 50,parentID: 35,Phone: "[phone]",City: "Hazaribag",Name: "Lance" }],tree = getTree(data,undefined,'ID','parentID');

console.log(tree);

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