Drehen verschachtelte JSON in eine HTML-verschachtelte Liste mit Javascript

StackOverflow https://stackoverflow.com/questions/1211764

  •  06-07-2019
  •  | 
  •  

Frage

Ich bin ziemlich neu in mit JSON (im Gegensatz zu XML im Gegensatz) und zur Zeit arbeitete rein mit Javascript zu verdauen, analysiere und meine zurück JSON-Daten angezeigt werden.

Ich verwende die json2.js Bibliothek und bin immer einige gültige JSON-Daten zurück eine ziemlich einfache verschachtelte Liste darstellt: 

{
  "node":{
    "class":"folder",
    "title":"Test Framework",
    "node":{
      "class":"folder",
      "title":"Item 1",
      "node":{
        "class":"folder",
        "title":"Item 1.1",
        "node":{
          "class":"file",
          "title":"Item 1.1.a"
        }
      },
      "node":{
        "class":"folder",
        "title":"Item 1.2",
        "node":{
          "class":"file",
          "title":"Item 1.2.a"
        },
        "node":{
          "class":"file",
          "title":"Item 1.2.b"
        },
        "node":{
          "class":"file",
          "title":"Item 1.2.c"
        }
      },
      "node":{
        "class":"folder",
        "title":"Item 1.3",
        "node":{
          "class":"folder",
          "title":"Item 1.3.a",
          "node":{
            "class":"file",
            "title":"Item 1.3.a.i"
          },
          "node":{
            "class":"file",
            "title":"Item 1.3.a.ii"
          }
        }
      }
    },
    "node":{
      "class":"folder",
      "title":"Item 2",
      "node":{
        "class":"file",
        "title":"item 2.a"
      },
      "node":{
        "class":"file",
        "title":"Item 2.b"
      }
    }
  }
}

Hat jemand irgendwelche Hinweise für eine schnelle Art und Weise mit all den verschachtelten Elementen, dass das Los in eine UL zu verwandeln? Es wäre wie die Klasse verwendet werden, auch wenn das „Klasse“ Element, das in der JSON ist könnte für jeden LI cool sein.

Jede Hilfe ist sehr geschätzt.

Danke,

Dave.

War es hilfreich?

Lösung

Ihre json auf Ihre Aufgabe ist ungeeignet. Einige Objekte haben mehrere Objekte mit dem gleichen Namen ( „Knoten“), so dass sie überschreiben sie. Sie haben stattdessen Arrays von Knoten zu verwenden. Hier ist ein funktionierendes Datenstruktur und die Funktionen, die sie in eine verschachtelte Liste drehen kann: 

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

Und ich kann diese CSS hinzufügen, um die Elemente zu haben Nummerierungen der Knoten Titel entsprechen:) 

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

Sie dafür, in Aktion.

Andere Tipps

Hier ist ein ziemlich einfacher Code, der für jedes Objekt ein <ul> Element erzeugt, und ein <li> Element für jeden Abschnitt. Sie können eine schnelle Überprüfung fügen Sie die child Variable gegen Dinge wie "class" zu testen, ob Sie ein Sonderfall hinzufügen möchten. 

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);
    }
}

Dies wird nicht genau das tun, was Sie wollen, weil Ihr JSON macht keinen Sinn. Objekte in JavaScript und damit JSON, sind Karten, und so können Sie nicht mehr als ein Kind haben mit dem gleichen Namen. Sie müssen Ihre mehrere „Knoten“ s in ein Array drehen, wie Cédric weist darauf hin.

Sie können Ihre json Struktur selbst zu Fuß durch und entsprechenden <li> schaffen, wenn nötig, aber ich schlage vor, Sie Composite-Muster zu implementieren. Siehe Link für weitere Details

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top