Question

我有一个像这样的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>

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

有没有人做过这样的事情并且可以帮助我？

[编辑（对Blender和Dan Pichelman）] 我尝试使用PHP之一（我没有发布以免溢出问题）：

<?php
$dom = new DOMDocument('1.0', 'utf-8');
$dom_menu = $dom->createElement('ul');
$attr = $dom->createAttribute('id');
$attr->value = ('menu');
$dom_menu->appendChild($attr);
$dom->appendChild($dom_menu);

arvore($treeJson, $dom_menu);

function arvore($obj, $dom_pai) {
    global $cont;
    global $dom;
    global $dom_menu;

    $id = $obj->name."_".$cont."_".rand(1, 999);
    $qtd = count($obj->children);

    $uls = childrenPai($obj->children, $dom_menu);
}

function childrenPai($children, $pai) {
    global $dom;

    for ($i=0; $i<count($children); $i++) {
        $ul = $dom->createElement('ul');

        $li = criarLi($children[$i], "-");

        $ul->appendChild($li);
        $pai->appendChild($ul);

        $uls[] = $ul;
    }
    return $uls;
}


function criarLi($obj, $id) {
    global $dom;

    $e = $dom->createElement('li', $obj->name);
    $attr = $dom->createAttribute('id');
    $attr->value = $id."_".trim($obj->name);
    $e->appendChild($attr);
    $dom->appendChild($e);

    return $e;
}

echo $dom->saveXML();

这不能正常工作。 HTML列表是使用一些“错误”创建的。

Answer 1

/*
 * `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;    
}

http://jsfiddle.net/6esW8/1/

Answer 2

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

我会使用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']

依旧......

这是一个fiddle

我正在使用jquery将html附加到body元素上，而不是将每一步保存到变量中，而是在我解析json的时候。

由于这个结构的迭代性质，你可以构造一个for循环（jquery中的.each（）），它可以传递这个并使这个输出更具程序性

将JSON（包含这么多/未确定的子项）转换为HTML列表

2 个答案: