Treeview到Tepmlate文字

问题描述

我用树视图查看了Json数据，并希望使用模板文字将其打印在屏幕上。

JSON数据：

var arr = [{
                "ID": 1,"parentID": 0,"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"
            }]

我在树状视图中编写的代码：

const arr_tree = arr.reduce((tree,{ parentID,...useful },_,Origin) => {
    if (!parentID) tree.push({...useful })
    else {
        let path = { children: tree },road = [Origin.find(x => x.ID === parentID)];
        while (!!road[0].parentID) {
            road.unshift(Origin.find(x => x.ID === road[0].parentID))
        }
        for (let way of road) {
            path = path.children.find(x => x.ID === way.ID)
        }
        if (!path.children) path.children = [];
        path.children.push({...useful })
    }
    return tree
},[]);

我要使用模板文字打印到屏幕上的代码：

document.getElementById("app").innerHTML = `${arr_tree.map(function(data){
    return `
    <div class = "bord">
    <p>${data.Name}</p>
    <p>${data.Phone}</p>
    <p>${data.City}</p>
    <p>${data.children}</p>
    </div>
    `
}).join(' ')}`

这里的问题是我可以访问主要对象的值，但不能访问子对象的值，并且它在屏幕上显示为[object Object]。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）