使用Javascript将嵌套的JSON转换为HTML嵌套列表

问题描述：

我刚开始使用JSON(而不是XML)，并且目前仅使用Javascript来消化，解析和显示返回的JSON数据.

I'm fairly new to using JSON (as opposed to XML) and am currently working purely with Javascript to digest, parse and display my returned JSON data.

我正在使用JSON2.js库，并获取了一些表示一个相当简单的嵌套列表的有效JSON数据:

I'm using the JSON2.js library and am getting back some valid JSON data representing a fairly simple nested list:

{
  "node":{
    "class":"folder",
    "title":"Test Framework",
    "node":{
      "class":"folder",
      "title":"Item 1",
      "node":{
        "class":"folder",
        "title":"Item 1.1",
        "node":{
          "class":"file",
          "title":"Item 1.1.a"
        }
      },
      "node":{
        "class":"folder",
        "title":"Item 1.2",
        "node":{
          "class":"file",
          "title":"Item 1.2.a"
        },
        "node":{
          "class":"file",
          "title":"Item 1.2.b"
        },
        "node":{
          "class":"file",
          "title":"Item 1.2.c"
        }
      },
      "node":{
        "class":"folder",
        "title":"Item 1.3",
        "node":{
          "class":"folder",
          "title":"Item 1.3.a",
          "node":{
            "class":"file",
            "title":"Item 1.3.a.i"
          },
          "node":{
            "class":"file",
            "title":"Item 1.3.a.ii"
          }
        }
      }
    },
    "node":{
      "class":"folder",
      "title":"Item 2",
      "node":{
        "class":"file",
        "title":"item 2.a"
      },
      "node":{
        "class":"file",
        "title":"Item 2.b"
      }
    }
  }
}

是否有人有任何针对快速将所有嵌套元素转换为UL的方法的指针?如果可以将JSON中的"class"元素用作每个LI的类，那么也很酷.

Does anyone have any pointers for a quick way to turn that lot into a UL with all of the nested elements? It would be cool as well if the "class" element that's in the JSON could be used as the class for each LI.

非常感谢您的帮助.

谢谢

戴夫.

答

您的json不适合您的任务.一些对象具有相同名称的多个属性(节点")，因此它们相互覆盖.您必须改为使用节点数组.这是一个有效的数据结构以及可以将其转换为嵌套列表的功能:

Your json is unsuited to your task. Some objects have several properties with the same name ("node"), so they are overriding one another. You have to use arrays of nodes instead. Here is a working data structure and the functions that can turn it into a nested list:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function parseNodes(nodes) { // takes a nodes array and turns it into a <ol>
    var ol = document.createElement("OL");
    for(var i=0; i<nodes.length; i++) {
        ol.appendChild(parseNode(nodes[i]));
    }
    return ol;
}

function parseNode(node) { // takes a node object and turns it into a <li>
    var li = document.createElement("LI");
    li.innerHTML = node.title;
    li.className = node.class;
    if(node.nodes) li.appendChild(parseNodes(node.nodes));
    return li;
}

window.jsonData = [{
    "class": "folder",
    "title": "Test Framework",
    "nodes": [{
        "class": "folder",
        "title": "Item 1",
        "nodes": [{
            "class": "folder",
            "title": "Item 1.1",
            "nodes": [{
                "class": "file",
                "title": "Item 1.1.a"
            }]
        },
        {
            "class": "folder",
            "title": "Item 1.2",
            "nodes": [{
                "class": "file",
                "title": "Item 1.2.a"
            },
            {
                "class": "file",
                "title": "Item 1.2.b"
            },
            {
                "class": "file",
                "title": "Item 1.2.c"
            }]
        },
        {
            "class": "folder",
            "title": "Item 1.3",
            "nodes": [{
                "class": "folder",
                "title": "Item 1.3.a",
                "nodes": [{
                    "class": "file",
                    "title": "Item 1.3.a.i"
                },
                {
                    "class": "file",
                    "title": "Item 1.3.a.ii"
                }]
            }]
        }]
    },
    {
        "class": "folder",
        "title": "Item 2",
        "nodes": [{
            "class": "file",
            "title": "item 2.a"
        },
        {
            "class": "file",
            "title": "Item 2.b"
        }]
    }]
}];

</script>
</head>
<body>
    <input type="button" 
    onclick="document.body.appendChild(parseNodes(jsonData))"
    value="go" />
</body>
</html>

然后我可以添加此CSS，以使项目编号与节点标题匹配:)

And I can add this css to have the items numberings match the node titles :)

<style type="text/css">
ol { list-style-type: none }
ol ol { list-style-type: decimal }
ol ol ol { list-style-type: decimal }
ol ol ol ol { list-style-type: lower-alpha }
ol ol ol ol ol { list-style-type: lower-roman }
</style>

查看实际效果.

使用Javascript将嵌套的JSON转换为HTML嵌套列表

相关推荐