Recursive function ud fra json streng ?

<ole>

Det er en lidt sær JSON-streng. Hvor kommer den fra - og må jeg foreslå en anden struktur?

/mvh
</bole>

Hvis du i stedet laver denne struktur:

[
    {"name": "node1"},
    {"name": "node2",
        "children": [
            {"name": "node2.1"},
            {"name": "node2.2",
                "children": [
                    {"name": "node2.2.1"},
                    {"name": "node2.2.2"}
                ]
            }
        ]
    },
    {"name": "node3"},
    {"name": "node4"}
]

- kan du bruge denne kode:

<script type="text/javascript">
var sJson  = '[{"name":"node1"},{"name":"node2","children":[{"name":"node2.1"},{"name":"node2.2","children":[{"name":"node2.2.1"},{"name":"node2.2.2"}]}]},{"name":"node3"},{"name":"node4"}]';

function insertData(oContainer, oNode) {
    var oLi = oTempl.li.cloneNode(true);
    oContainer.appendChild(oLi);
    oLi.getElementsByTagName("span")[0].firstChild.nodeValue = oNode.name;
    if (oNode.children) {
        var oUl = oTempl.ul.cloneNode(true);
        oLi.appendChild(oUl);
        for (var i=0,j=oNode.children.length; i<j; i++) {
            insertData(oUl, oNode.children[i]);
        }
    }
}
function insertJson(sJson) {
    var aNodes = eval("("+sJson+")");
    var oUl = oTempl.ul.cloneNode(true);
    oTree.appendChild(oUl);
    for (var i=0,j=aNodes.length; i<j; i++) {
        insertData(oUl, aNodes[i]);
    }
}

var oTree = oTempl = null;
window.onload = function() {
    oTree = document.getElementById("tree");
    oTempl = {ul:oTree.removeChild(oTree.getElementsByTagName("ul")[0])};
    oTempl.li = oTempl.ul.removeChild(oTempl.ul.getElementsByTagName("li")[0]);
}
</script>

<p><button onclick="insertJson(sJson)">TEST</button>

<div id="tree">
<ul>
    <li><span>&nbsp;</span></li>
</ul>
</div>

Det var et meget fornemt eksempel, tak for det. Jeg kan se du benytter dig af en "template" som du så kloner og befolker.

Ville der være noget i vejen for at oprette elementerne fra javascript frem for at klone/befolke ?

Grunden til spørgsmålet er at ideen var at listen skal loades ved klik på link og derefter indsættes i DOM uden at have andet end et div tag som container til listen.

Nej, det kan du sagtens gøre. Jeg viste blot fremgangsmåden med en template, fordi mange overser den mulighed og brokker sig over 'besværet' med at oprette enkeltelementer. Faktisk afvikler det ikke engang hurtigere med en template, så du klemmer bare på  ;o)

Derudover håber jeg, du er enig i, der er tale om en bedre og mere logisk JSON-struktur  =)

Ja jeg er helt enig med dig hvad angår JSON, dog har jeg lavet den sådan :

{"items":[. . alle noder . .]}

på den måde får jeg et object ved navn "items" som indeholder et array med top og under noder, efter forskrifterne (www.json.org) skulle jeg godt kunne gøre sådan.

Jeg roder lidt videre med det og ser om ikke jeg kan få noget kollaps/expand bygget på, sammen med nogle +/- billeder og poster resultatet, så kan andre få muligheden for at se det ;o)

Tak for hjælpen ;o)

Hvordan går det for øvrigt med din bog ?

For noget tide siden læste jeg i en tråd at du var igang med en javascript bog er den kommet på gaden ?