0

我有一个这样的 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 列表是用一些“错误”创建的。

4

2 回答 2

4 
/*
 * `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/

于 2013-05-17T16:44:48.523 回答
0

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

我会使用 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()），它可以通过它并使这个输出更加程序化

于 2013-05-17T16:18:23.033 回答