Question

下面我编写了一些函数来遍历JSON对象并构建一个div树的DOM树，以便在GUI形式中镜像JSON结构，我知道它遍历整个对象，但问题是它是仅显示其中一个节点的最后一项。

这是它显示的DOM树：

        <div>
            Users
            <div>
                test
                <div>
                    lastName
                    <div>
                         Test
                    </div>
                </div>
            </div>
        </div>

以下是代码：

        function convert(obj){

              for (var key in obj){
                    if (obj.hasOwnProperty(key)){
                          var div = document.createElement('div');
                          div = $(div);
                          div.text(key)

                          var child = convertElement(obj[key]);
                          div.append(child);
                    }
              }
              return div;
        }

        function convertElement(element){
              switch (typeof(element)){
                    case 'object':
                          return convert(element);
                          break;
                    case 'array':
                          return convert(element);
                          break;
                    case 'string':
                          return divify(element);
                          break;
                    case 'number':
                          return divify(element);
                          break;
                    case 'boolean':
                          return divify(element);
              }
        }     

        function divify(element){
              var div = document.createElement('div');
              div = $(div)
              div.text(element);
              return div;
        }

Answer 1

这是因为在你的代码中：

function convert(obj) {

    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
              var div = document.createElement('div');
              div = $(div);
              div.text(key)

              var child = convertElement(obj[key]);
              div.append(child);
        }
    }
    return div;
}

请注意，为div中的每个密钥创建了一个新的obj。因此，最后一个div将是循环完成后最后创建的元素。在上面的这种情况下，它将是具有文本"Test"的那个。如果您想要所有元素，则需要执行的操作是将它们存储在一个数组中，.push()每个元素都创建<div>到该数组中。通过这种方式，您将返回整个DOM树（其中第一个元素是最外层的div，最后一个元素是最内层的），而不仅仅是最后一个项目：

var divs = [];
for (var key in obj) {
    if (obj.hasOwnProperty(key)){
        var div = document.createElement('div');
        div = $(div);
        div.text(key)

        var child = convertElement(obj[key]);
        div.append(child);
        divs.push(div);
     }
}
return divs;

Answer 2

这里是将JSON转换为DOM（Click here to View Demo）

的代码

var my_json = {
    "name" : "Jakob",
    "Job Title" : "Software Engineer",
    "Platforms" : ["OSX", "Windows", "Linux"]
};

function obj_to_dom(obj) {
    var parent = $("<div></div>");
    $.each(obj, function(key, val) {
        var child = $("<div></div>");
        child.text(key);
        child.append(to_dom(val));
        parent.append(child);
    });
    return parent;
}

function arr_to_dom(arr) {
    var parent = $("<div></div>");
    $.each(arr, function(i, val) {
        parent.append(to_dom(val));
    });
    return parent;
}

function literal_to_dom(literal) {
    var parent = $("<div></div>");
    parent.text(literal);
    return parent;
}

function to_dom(obj) {
    if( $.isArray(obj) )
        return arr_to_dom(obj);
    if( $.isPlainObject(obj) )
        return obj_to_dom(obj);
    return literal_to_dom(obj);
}

$(document).ready(function(){
    var my_dom = to_dom(my_json);
    $("body").append(my_dom);
});

我们可以使用JQuery的JSON和Array迭代函数，＆＃34; $。each＆＃34;。这将使其与所有浏览器兼容。此外，我们将工作划分为小功能，以保持简单和可读性。

遍历json对象仅返回每个键的最后一个，同时保留所需的DOM结构

2 个答案: