Итерация через вложенные объекты/массивы

Question

Я пытаюсь выполнить итерацию объекта, который может иметь несколько уровней массивов.

Например.

Я начинаю с:

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

Теперь давайте добавим что-то другое:

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

Код я работаю над будет иметь такой же формы, как:

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

Правила каждого дополнительного элемента одинаковы, поэтому я должен иметь возможность просто пропустить эту структуру данных так же, как и для b некоторые части кода, я просто не уверен, как, хотя я готов поспорить, что там где-то есть цикл while(). Может ли кто-нибудь сказать мне?

P.S. Ровный javascript, пожалуйста, нет jQuery! (Хотя, если у вас есть ответ YUI3, мне было бы очень интересно).

Answer 1

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

Answer 2

Хорошо, код Qnan нуждалась немного подправить, так как он не имел дело с получением до конца конца ветви должным образом. Как только это дошло до конца, проверить было нечего, и нулевая длина ничего не вызывала ошибку.

Я знаю, что это плохая практика, но уже поздно, и мне нужно это исправление, поэтому вот моя настройка.

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

Да, это правильно, я похоронил ошибку, попробовав/поймав ее ... а затем ничего не делая. Не пробуйте это дома дети!

Qnan, еще раз спасибо.