[ACCEPTED]-Turning nested JSON into an HTML nested list with Javascript-nested

Accepted answer

Score: 12

Your json is unsuited to your task. Some 8 objects have several properties with the 7 same name ("node"), so they are 6 overriding one another. You have to use 5 arrays of nodes instead. Here is a working 4 data structure and the functions that can 3 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>

And I can add 2 this css to have the items numberings match 1 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>

See it in action.

Score: 2

Here's some fairly simple code that creates 11 a <ul> element for each object, and a <li> element 10 for each portion. You can add a quick check 9 to test the child variable against things like 8 "class" if you want to add a special case.

function jsonToHtmlList(json) {
    return objToHtmlList(JSON.parse(json));
}

function objToHtmlList(obj) {
    if (obj instanceof Array) {
        var ol = document.createElement('ol');
        for (var child in obj) {
            var li = document.createElement('li');
            li.appendChild(objToHtmlList(obj[child]));
            ol.appendChild(li);
        }
        return ol;
    }
    else if (obj instanceof Object && !(obj instanceof String)) {
        var ul = document.createElement('ul');
        for (var child in obj) {
            var li = document.createElement('li');
            li.appendChild(document.createTextNode(child + ": "));
            li.appendChild(objToHtmlList(obj[child]));
            ul.appendChild(li);
        }
        return ul;
    }
    else {
        return document.createTextNode(obj);
    }
}

This 7 won't do exactly what you want, because 6 your JSON doesn't make sense. Objects in 5 JavaScript, and therefore JSON, are maps, and 4 so you can't have more than one child with 3 the same name. You'll need to turn your 2 multiple "node"s into an array, as Cédric 1 points out.

Score: 0

You can walk through your json structure 3 by yourself and create appropriate <li> when 2 needed, but I suggest you to implement Composite 1 Pattern. See link for more details

Source: stackoverflow.com

[ACCEPTED]-Turning nested JSON into an HTML nested list with Javascript-nested

List comprehension iterating over two lists is not working as expected

How to parse nested JSON object in Delphi XE2?

build_json_object issue with nested JSON

filter nested tree object without losing structure

Nested Javascript Templates ... is this possible / valid?

React Hook Form: Submit a form with nested components or extract fields of nested components to submit

How do I create nested categories in a Database?

How to Define nested Collection items in Hive

How to understand and use `<fx:root>` , in JavaFX?

C# Reflection with recursion