将JSON（包含如此多/未确定的子对象）转换为HTML列表

我有这样一个JSON：

{
  "name":"Tree",
  "id":"999999",
  "is_open":true,
  "children": [
    {
      "name":"Tree Step 1",
      "id":"1",
      "is_open":true,
      "children":[
        {
          "name":"Tree Step 1.1",
          "id":"1"
        },
        {
          "name":"Tree Step 1.2",
          "id":"2"
        }
      ]
    },
    {
      "name":"Tree Step 2",
      "id":"3",
      "is_open":true,
      "children":[
        {
          "name":"Tree Step 2.1",
          "id":"5"
        },
        {
          "name":"Tree Step 2.2",
          "id":"4"
        }
      ]
    },
    {
      "name":"Tree Step 3",
      "id":"3",
      "is_open":true,
      "children":[
        {
          "name":"Tree Step 3.1",
          "id":"5"
        },
        {
          "name":"Tree Step 3.2",
          "id":"4"
        }
      ]
    }]
  }

我需要转换为HTML列表，如：

<ul>
    <li>Tree
        <ul>
            <li>Tree Step 1
                <ul>
                    <li>Tree Step 1.1</li>
                    <li>Tree Step 1.2</li>
                </ul>
            </li>
            <li>Tree Step 2
                <ul>
                    <li>Tree Step 2.1</li>
                    <li>Tree Step 2.2</li>
                </ul>
            </li>
            <li>Tree Step 3
                <ul>
                    <li>Tree Step 3.1</li>
                    <li>Tree Step 3.2</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

树

树步骤1

树步骤1.1
树步骤1.2


树步骤2

树步骤2.1
树步骤2.2


树步骤3

树步骤3.1
树步骤3.2

我用不同的方法试了好几次，但都解决不了。重要的是要记住，根据用户设置，一个孩子可能有几个孩子

有没有人做过这样的事，可以帮我

[编辑（给Blender和Dan Pichelman）] 我使用PHP的一次尝试（我没有发帖以避免问题溢出）：

---

因此，令人困惑的是，它是一个包含数组的对象，包含包含数组的对象。。。因此，它使解析变得复杂

我会使用javascript，由于您正在寻找的html输出，可能还有jquery

因此，给定一个对象：

var jsonObject = {
  "name":"Tree",
  "id":"999999",
  "is_open":true,
  "children": [
    {
      "name":"Tree Step 1",
      "id":"1",
      "is_open":true,
      "children":[
        {
          "name":"Tree Step 1.1",
          "id":"1"
        },
        {
          "name":"Tree Step 1.2",
          "id":"2"
        }
      ]
    },
    {
      "name":"Tree Step 2",
      "id":"3",
      "is_open":true,
      "children":[
        {
          "name":"Tree Step 2.1",
          "id":"5"
        },
        {
          "name":"Tree Step 2.2",
          "id":"4"
        }
      ]
    },
    {
      "name":"Tree Step 3",
      "id":"3",
      "is_open":true,
      "children":[
        {
          "name":"Tree Step 3.1",
          "id":"5"
        },
        {
          "name":"Tree Step 3.2",
          "id":"4"
        }
      ]
    }]
  }

您可以这样解析它：

tree = jsonObject["name"]
 tree_step_1 = jsonObject['children'][0]['name']
 tree_step_1.1 = jsonObject['children'][0]['children'][0]['name']

等等

这是一个

我使用jquery将html附加到body元素上，并在解析json时将每个步骤保存到变量中

由于此结构的迭代性质，您可以构造一个for循环（.jquery中的each（）），该循环可以传递此结果，并使此输出更加程序化
，因此令人困惑的是，它是一个包含数组的对象，包含包含数组的对象。。。因此，它使解析变得复杂

/*
 * `jsn` -- described json
 * returns: 
 *   result -- html tree, so you can latter append it to some node;
 */
var parseJsonAsHTMLTree = function(jsn){
    var result = '';
    if(jsn.name){
        result += '<ul><li>' + jsn.name;        

        for(var i in jsn.children)
            result += parseJsonAsHTMLTree(jsn.children[i]); 

        result += '</li></ul>';
    }

    return result;    
}

我会使用javascript，由于您正在寻找的html输出，可能还有jquery

因此，给定一个对象：

var jsonObject = {
  "name":"Tree",
  "id":"999999",
  "is_open":true,
  "children": [
    {
      "name":"Tree Step 1",
      "id":"1",
      "is_open":true,
      "children":[
        {
          "name":"Tree Step 1.1",
          "id":"1"
        },
        {
          "name":"Tree Step 1.2",
          "id":"2"
        }
      ]
    },
    {
      "name":"Tree Step 2",
      "id":"3",
      "is_open":true,
      "children":[
        {
          "name":"Tree Step 2.1",
          "id":"5"
        },
        {
          "name":"Tree Step 2.2",
          "id":"4"
        }
      ]
    },
    {
      "name":"Tree Step 3",
      "id":"3",
      "is_open":true,
      "children":[
        {
          "name":"Tree Step 3.1",
          "id":"5"
        },
        {
          "name":"Tree Step 3.2",
          "id":"4"
        }
      ]
    }]
  }

您可以这样解析它：

tree = jsonObject["name"]
 tree_step_1 = jsonObject['children'][0]['name']
 tree_step_1.1 = jsonObject['children'][0]['children'][0]['name']

等等

这是一个

我使用jquery将html附加到body元素上，并在解析json时将每个步骤保存到变量中

由于这种结构的迭代性质，您可以构造一个for循环（.jquery中的each（）），该循环可以传递此内容，并使此输出更加程序化
/*
/*
 * `jsn` -- described json
 * returns: 
 *   result -- html tree, so you can latter append it to some node;
 */
var parseJsonAsHTMLTree = function(jsn){
    var result = '';
    if(jsn.name){
        result += '<ul><li>' + jsn.name;        

        for(var i in jsn.children)
            result += parseJsonAsHTMLTree(jsn.children[i]); 

        result += '</li></ul>';
    }

    return result;    
}

*`jsn`--json描述
*返回：
*结果——html树，这样您就可以将它附加到某个节点上；
*/
var parseJsonAsHTMLTree=函数（jsn）{
var结果=“”；
if（jsn.name）{
结果+='
'+jsn.name；
for（jsn.children中的变量i）
result+=parseJsonAsHTMLTree（jsn.children[i]）；
结果+='
'；
}
返回结果；
}

/*
*`jsn`--json描述
*返回：
*结果——html树，这样您就可以将它附加到某个节点上；
*/
var parseJsonAsHTMLTree=函数（jsn）{
var结果=“”；
if（jsn.name）{
结果+='
'+jsn.name；
for（jsn.children中的变量i）
result+=parseJsonAsHTMLTree（jsn.children[i]）；
结果+='
'；
}
返回结果；
}

“我以不同的方式尝试了好几次”。你能发布一个例子吗？你能发布一些你的代码吗？你尝试过什么？它是如何解决你的问题的？用哪种语言？聪明？普通PHP。网？这不是客户端的工作。好吧，很抱歉。我正在使用PHP和javascript进行开发。我的一次尝试更新了这个问题。谢谢“我以不同的方式尝试了好几次”。你能发布一个例子吗？你能发布一些你的代码吗？你尝试过什么？它是如何解决你的问题的？用哪种语言？聪明？普通PHP。网？这不是客户端的工作。好吧，很抱歉。我正在使用PHP和javascript进行开发。我的一次尝试更新了这个问题。谢谢嘿，特德，你的解决方案太棒了。。。只需设置一个细节：代码在“步骤1.1”和“步骤1.2”之间包含一个额外的
。。。我会试试这个…嗯。。。我在这方面没有成功：（@user2157786，this（）可能对你有用，但它有点丑！非常感谢你，特德！嘿，特德，你的解决方案太棒了…只有一个细节需要设置：代码在
“步骤1.1”和“步骤1.2”之间包含一个额外的
。。我会尝试解决这个问题…嗯…我在这方面没有成功：（@user2157786，this（）可能对你有用，但有点难看！非常感谢你，ted！Jeremythuff，这个JSON没问题，但会有很大变化。取决于用户创建JSON的方式。这是一个用户创建菜单树的系统，可以有1、2、3…N级Jeremythuff，这个JSON没问题，但会有很大变化。这取决于用户对它做了什么创建JSON。这是一个用户创建菜单树的系统，可以有1、2、3…N个级别