Question

Javascript / jQuery newbie here。

我的网络服务器正在将目录树的内容作为JSON对象发送。该对象是任意嵌套的，具体取决于包含其他子目录的子目录的数量。它看起来像这样：

{
    "contents": [
        {
            "filename": "myfile",
            "mtime": 123456,
            "size": 2345,
            "content": nil
        },
        {
            "filename": "mydir",
            "mtime": 2345678,
            "size": 3456788,
            "content": [
                {...},
                {...}
            ]
        }
    ]
}

myfile是普通文件，因此“content”为空。 mydir是一个可能为空的目录，或包含其他文件或子目录。

我想用javascript解析这个JSON并生成内容的html ul表示。我的问题是：有一个简单/推荐的方法来做到这一点？

Answer 1

如果您使用jQuery通过ajax调用接收JSON文本，jQuery会将其反序列化为对象图。如果您以其他方式收到它并将其包含在字符串中，则可以使用jQuery.parseJSON对其进行反序列化。

但是，您引用的JSON无效，特别是这一点：

"content": nil

JSON中没有nil个关键字。您需要修复服务器以完全关闭密钥，或使用null或其他内容。有效的JSON在JSON website上定义，您可以使用http://jsonlint.com进行方便的验证（和格式化）。一致地使用content或contents也可能有用;目前最高级别使用contents，但从属条目使用content。

一旦你有了对象图，它就是递归函数的一个相当简单的问题，循环遍历数组条目，对于可以拥有嵌套内容的条目，再次调用自己来循环遍历它。有点模糊的东西（live copy）：

jQuery(function($) {

  display("Loading the JSON data");
  $.ajax({
    type:     "GET",
    url:      "/path/to/the/data",
    dataType: "JSON",
    success:  function(data) {
      display("Got the data, rendering it.");
      $(document.body).append(renderContents(data.contents));
    },
    error:    function() {
      display("An error occurred.");
    }
  });

  function renderContents(contents) {
    var index, ul;

    // Create a list for these contents
    ul = $("<ul>");

    // Fill it in
    $.each(contents, function(index, entry) {
      var li;

      // Create list item
      li = $("<li>");

      // Set the text
      li.text(entry.filename);

      // Append a sublist of its contents if it has them
      if (entry.content) {
        li.append(renderContents(entry.content));
      }

      // Add this item to our list
      ul.append(li);
    });

    // Return it
    return ul;
  }

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

Answer 2

使用jQuery。在jQuery ajax函数中，json使用dataType，它会自动解析json并返回一个json对象。您可以使用jQuery循环遍历json数组的每个函数，并使用其中的数据创建您的ui。

$.ajax({url:'ur url',dataType:'json',success:function(result){
var dhtml="<ul>";
$.each(result.contents,function(key,value){
        dhtml+="<li><span>"+value.filename+"</span><span>"+value.mtime+"</span></li>";
  })

dhtml+="</ul>";

$(body).append(dhtml);//Will add the result to ur html body
}
})

Jquery Each Api

Jquery ajax Api

Answer 3

循环遍历这样的遍历结构的最简单方法通常是编写递归（“自调用”）函数：

// $parent is a jQuery object referring to an element 
// you what to create the tree in.
// data is your (parsed) JSON object.
function displayFileTree($parent, data) {
  if (data["contents"] && data["contents"].length) {
    var contents = data["contents"];

    // create a list element
    $list = $("<ul/>");

    // loop over the "contents"
    for (var i = 0, len = contents.length; i < len; i++) {

       // create list item, set its text and append it to the list
       $item = $("<li/>").text(contents[i].filename).appendTo($list);

       // call this function to create a sublist of the subitems
       displayFileTree($item, contents[i]);

    }

    // add list to parent
    $parent.append($list);
  }
}

（这个函数假定JSON是正确的，正如T.J.Crowder的回答所建议的那样，特别是它在任何地方使用“内容”作为关键而不是“内容”。）

（编辑：在Crowder用类似的解决方案扩展他的答案之前，我开始写这篇文章。）

在javascript中从任意复杂的JSON对象生成html

3 个答案: