Javascript：如何从 JSON 开始创建嵌套的 DIV

Question

也许这很容易，但对我来说不是。 从 JSON 树结构开始，我尝试对其进行迭代，并为每个节点创建一个 DIV，嵌套 DIV，例如，更改每个 DIV 的背景颜色，从 JSON 对象中获取信息。 我到目前为止所做的是这个功能：

function uiCreator(tree, page, container){
function iterator (obj) {
    for (var i in obj) {
        if (typeof obj[i] === "object" && obj[i] !== null) {
            page.Render("createElement", "D"+i, "DIV"); //page.Render() wrap the DOM functions and saves the DOM objects inside an array
            page.Render("createTextNode", "T"+i, i);
            page.Render("appendChild", "D"+i, "T"+i); //appends the text node inside the DIV
            page.Render("appendChild", container, "D"+i); //appends (or it should) the DIV to the upper level.
            page.Render("margin", "D"+i, "10px");
            page.Render("border", "D"+i, "solid");
            page.Render("backgroundColor", "D"+i, obj[i].color);
            if(typeof obj[i][Object.keys(obj[i])[0]] === "object") container = "D"+i; // if the first child of obj[i] is an object, container is updated
            iterator(obj[i]);
            if(typeof obj[i][Object.keys(obj[i])[0]] === "object") container = "D"+i;
        }
    }
}
iterator(tree);

}

其中“tree”是 JSON 数据结构，“page”是操作 DOM 的对象（它包装 DOM 函数并将引用存储在关联数组中），“container”用作对外部的引用DIV 将包含函数的结果（在迭代期间“容器”被更新以引用结构的当前节点）。 现在这个函数在结构层次上工作得很好。但不是什么时候回去。该函数以正确的方式迭代整个结构，我认为问题出在：

page.Render("appendChild", container, "D"+i);

这里：

if(typeof obj[i][Object.keys(obj[i])[0]] === "object") container = "D"+i;

谢谢！

PS： 使用的树结构示例：

treeObj = {
"01" : {
    "01_01" : {
        "01_01_01" : {"color" : "#F0F8FF"},
        "01_01_02" : {"color" : "#FAEBD7"},
        "01_01_03" : {"color" : "#00FFFF"},
        "01_01_04" : {"color" : "#7FFFD4"},
        "01_01_05" : {"color" : "#F0FFFF"},
        "color" : "#7CFC00"
    },
    "01_02" : {
        "01_02_01" : {"color" : "#F5F5DC"},
        "01_02_02" : {"color" : "#FFE4C4"},
        "01_02_03" : {"color" : "#000000"},
        "01_02_04" : {"color" : "#FFEBCD"},
        "01_02_05" : {"color" : "#0000FF"},
        "color" : "#FFFACD"
    }, ...

Answer 1

好的，我不确定到底是怎么理解的，但它现在似乎可以正常工作了。这里是新版本的函数：

function uiCreator(tree, page, container){
    var iter = 1;
    var iarr = [container];
    function jsonIterator(obj, iter) {
        for (var i in obj) {
            if (typeof obj[i] === "object" && obj[i] !== null) {
                page.Render("createElement", "D"+i, "DIV");
                page.Render("border", "D"+i, "solid");
                page.Render("createTextNode", "T"+i, i);
                iarr[iter] = "D"+i;
                page.Render("appendChild", "D"+i, "T"+i);
                page.Render("appendChild", iarr[iter-1], "D"+i);
                page.Render("margin", "D"+i, "10px");
                page.Render("backgroundColor", "D"+i, obj[i].color);
                if(typeof obj[i][Object.keys(obj[i])[0]] === "object") iter++;
                jsonIterator(obj[i], iter);
                if(typeof obj[i][Object.keys(obj[i])[0]] === "object") iter--;
            }
        }
    }
    jsonIterator(tree, iter);
}

我为递归迭代添加了一个计数器：

var iter = 1;

还有一个存储所有对象键的数组：

var iarr = [container];

有了iarr[iter] = "D"+i;，我总是可以使用正确的上层：

page.Render("appendChild", iarr[iter-1], "D"+i);

最后但并非最不重要的是，使用以下代码：

if(typeof obj[i][Object.keys(obj[i])[0]] === "object") iter++;
jsonIterator(obj[i], iter);
if(typeof obj[i][Object.keys(obj[i])[0]] === "object") iter--;

我可以管理递归，我可以增加或减少计数器。 我希望这对某人有用，欢迎任何有更好想法实现此功能的人！