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

Question

这里是 Javascript/jQuery 新手。

我的网络服务器正在将目录树的内容作为 JSON 对象发送。该对象根据包含其他子目录的子目录的数量任意嵌套。它看起来像这样:

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

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

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

Answer 1

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

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

"content": nil

JSON 中没有 nil 关键字。您需要修复服务器以完全关闭 key ，或者使用 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);
  }
});