Próbuję iterować przez obiekt, który może mieć kilka poziomów tablic.

Na przykład.

Zaczynam od:

var htmlString = {
    "div": [{
        "attributes": {
            "class": "myDivClass"
        },
        "p": [{
            "attributes": {
                "class": "myPClass"
            }
        }]
    }]
};

Teraz dodajmy coś innego:

var htmlString = {
    "div": [{
        "attributes": {
            "class": "myDivClass"
        },
        "p": [{
            "attributes": {
                "class": "myPClass"
            },
            "span": [{
                "attributes": {
                    "class": "mySpanClass"
                }
            }]
        }]
    }]
};

Kodeks, nad którym pracuję, będzie miał ten sam rodzaj kształtu, co:

var childNode = document.createElement("myChildElement");
for (key in value) {
    if (value.hasOwnProperty(key)) {
        if (key == "attributes") {
            childNode.setAttributes(myAttributes); // loop through attributes on the element
        }
        else {
            //the same code ad infinitum
            var childChildNode = document.createElement("myChildChildElement");
            // etc etc....
        }
    }
}
parentNode.appendChild(childNode);

Zasady każdego dodatkowego elementu są takie same, więc powinienem być w stanie po prostu zapętlić tę strukturę danych w ten sam sposób na oba elementy kodu, nie jestem pewien, jak, chociaż zakładam, że jest jakiś czas () gdzieś tam pętla. Czy ktoś może mi powiedzieć?

Str.s. Native JavaScript, proszę, nie jQuery! (Chociaż, jeśli masz odpowiedź Yui3, byłbym bardzo zainteresowany).

1
Jezcentral 1 sierpień 2012, 21:06

2 odpowiedzi

Najlepsza odpowiedź
var createTree = function (node, data) {
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            if (key == "attributes") {
                node.setAttributes(myAttributes); // loop through attributes on the element
            }
            else {
                for (var i = 0; i < data[key].length; ++i) {
                    var childNode = document.createElement(key);
                    createTree(childNode, data[key][i]);
                    node.appendChild(childNode);
                }
            }
        }
    }
}

createTree(parentNode, htmlString);
2
Qnan 5 sierpień 2012, 09:47

Dobra, kod QNAN potrzebował małego ulepszenia, ponieważ nie miało radzenia sobie z dokładnością do końca końca gałęzi. Kiedy już dotarło do końca, nie było nic do sprawdzenia, a długa długość nic nie powodowała błędu.

Wiem, że to zła praktyka, ale jest późno i potrzebuję tego naprawy, więc oto mój tweak.

var createTree = function (node, data) {
    for (key in data) {
        if (data.hasOwnProperty(key)) {
            if (key == "attributes") {
                node.setAttributes(myAttributes); // loop through attributes on the element
            }
            else {
                try {
                    for (var i = 0; i < data[key].length; ++i) {
                        var childNode = document.createElement(key);
                        createTree(childNode, data[key][i]);
                        node.appendChild(childNode);
                    }
                }
                catch(error) {
                    console.log("there was an error");
                }
            }
        }
    }
}

createTree(parentNode, htmlString);

Tak, to prawda, pochowuję błąd, spróbuj go / połowu ... a potem nic nie robię. Nie próbuj tego w domu dzieci!

Qnan, znowu wielkie podziękowania.

0
Jezcentral 3 sierpień 2012, 23:05