Converts JSON (with so many children / indeterminate) to HTML list

advertisements

I have a JSON like this:

{
  "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"
        }
      ]
    }]
  }

I need to convert to a HTML list, like:

<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>

I tried several times in different ways, but could not solve it. It is important to remember that one child might have several childrens according to the user setting.

Has anyone done something like this and can help me?

[edit (to Blender and Dan Pichelman)] One of my attempts using PHP (i didnt post to not overflow the question):

<?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();

That did not work properly. The HTML list was created with some "bugs".


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