时间戳

首页 > 解决方案 > 根据深度记录的 JSON 对象树控制台 [平面 JS]

javascript - 根据深度记录的 JSON 对象树控制台 [平面 JS]

问题描述

所以我试图得到与此类似的 console.loged 结果：

LT 10
LT - Kaunas 2
LT - Kaunas - Centras 1
LT - Kaunas - Centras - lasives al. 0.5
LT - Kaunas - Žaliakalnis 1
LT - Vilnius 4

从这个 JSON 对象：

    var x = {
    "name": "LT",
    "size": 10,
    "nodes": [
        {
            "name": "Kaunas",
            "size": 2,
            "nodes": [
                {
                "name": "Centras",
                "size": 1,
                "nodes": [
                        {
                        "name": "lasives al.",
                        "size": 0.5,
                        "nodes": []
                        }
                    ]
                },
                {
                "name": "Žaliakalnis",
                "size": 1,
                "nodes": []
                }
            ]
        },
        {
            "name": "Vilnius",`enter code here`
            "size": 4,
            "nodes": []
        }
    ]
}

我的解决方案只是遍历对象，但我无法弄清楚如何根据深度打印所有内容。

var name = [];

function Print(data) {
    for(var da in data) {
        if(data.hasOwnProperty(da) && typeof data[da] === 'object') {
            Print(data[da])
        } else {
            name.push(data[da]);
        }
    }
}

Print(x);

试过似乎一切，我认为它应该接近一行代码，但无法弄清楚。似乎缺乏知识:)

标签： javascriptjsonobject

解决方案

我会使用一个接受前缀字符串的递归函数，请参阅评论：

function render(obj, prefix = "") {
    // Show this object's information
    console.log(prefix + obj.name + " " + obj.size);
    // Add its name to the prefix
    prefix += obj.name + " - ";
    // Recurse for each of its nodes
    for (const node of obj.nodes) {
        render(node, prefix);
    }
}
render(x);


var x = {
    "name": "LT",
    "size": 10,
    "nodes": [
        {
            "name": "Kaunas",
            "size": 2,
            "nodes": [
                {
                "name": "Centras",
                "size": 1,
                "nodes": [
                        {
                        "name": "lasives al.",
                        "size": 0.5,
                        "nodes": []
                        }
                    ]
                },
                {
                "name": "Žaliakalnis",
                "size": 1,
                "nodes": []
                }
            ]
        },
        {
            "name": "Vilnius",
            "size": 4,
            "nodes": []
        }
    ]
};

function render(obj, prefix = "") {
    // Show this object's information
    console.log(prefix + obj.name + " " + obj.size);
    // Add its name to the prefix
    prefix += obj.name + " - ";
    // Recurse for each of its nodes
    for (const node of obj.nodes) {
        render(node, prefix);
    }
}
render(x);

这使用了一些 ES2015+ 特性，但 ES5 版本非常相似：

function render(obj, prefix) {
    prefix = prefix || "";
    console.log(prefix + obj.name + " " + obj.size);
    prefix += obj.name + " - ";
    obj.nodes.forEach(function(node) {
        render(node, prefix);
    });
}
render(x);

推荐阅读