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

Question

下面我写了几个函数来遍历 JSON 对象并构建一个 DOM div 树来以 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;
}

请注意，为 obj 中的每个键创建了一个新的 div。因此，最后一个 div 将是循环完成后最后创建的元素。在上面的这种情况下，它将是带有文本 "Test" 的那个。如果您想要所有元素，您需要做的是将它们存储在一个数组中，并且每个 .push() 创建 <div> 到该数组中。这样你将 return 你的整个 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和数组迭代函数“$.each”。这将使它兼容所有浏览器。此外，我们将工作划分为多个小功能，以使其简单易读。

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

Traversing a json object returns only the last of each key, while keeping the needed DOM structure

jquery

json