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（在迭代期间“容器”更新以引用sctructure的当前节点）。现在这个功能与结构级别一起工作正常。但不是什么时候回去。该函数以正确的方式迭代整个结构，我认为问题在于：

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--;

我可以管理递归，然后增加或减少计数器。我希望这对某些人有用，并且任何有更好想法实现这个功能的人都是受欢迎的！

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

1 个答案: