使用 json 在 html 中构建树结构答案

【问题标题】：Build tree structure in html using json使用 json 在 html 中构建树结构
【发布时间】：2018-01-11 18:58:14
【问题描述】：

我正在尝试在 html 中构建动态树结构。我正在以嵌套的 json 格式从数据库中获取结果。

我无法正确读取 json 数据。格式是

[ { keys_1 : { keys_2 : [ array ] } } ]

在树结构中，key_1 是父母， key_2 是子项，数组项是孙项。

如何访问这个 json 数据，以便我可以读取父键、关联的子键和孙子键。

我试过这种方法，但做不到：

for (var i = 0; i < response.length; i++) {
    var level_1 = (JSON.stringify((Object.keys(response[i]))[0])).replace(/"/g, "");
    for (var j = 0; j < response[i].length; j++) {
        console.log("yes");
    }
}

甚至，我不知道如何输入具有不同键值的嵌套 json。 - 所有的钥匙都是不同的。 - 钥匙可能有/可能没有孩子，孩子也一样。

如何以这种方式读取 json 数据，以便首先读取一个父子，然后是孙子？

【问题讨论】：

如何将数据样本缩小到更小的样本......足以创建minimal reproducible example。还提供预期结果的样本

标签： javascript jquery json

【解决方案1】：

您可以使用嵌套方法，因为您具有以下结构：

数组：迭代，
对象：获取用于迭代的键，
对象：获取用于迭代的键，
数组：迭代。

var data = [{ 1000: { 110: ["1000110008", "1000110005", "1000110004", "1000110003", "1000110001", "1000110009"], 100: ["1000100001", "1000100002", "1000100019", "1000100018", "1000100017", "1000100015", "1000100014", "1000100013", "1000100003", "1000100004", "1000100006", "1000100007", "1000100008", "1000100009", "1000100011"] } }, { 1020: { 102: ["1020102001"] } }];

data.forEach(function (o) {
    Object.keys(o).forEach(function (k) {
        Object.keys(o[k]).forEach(function (l) {
            o[k][l].forEach(function (v) {
                console.log(k, l, v);
            });
        });
    });
});

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

【讨论】：