Это должно быть легкой проблемой, но по какой-то причине я бью кирпичную стену.
У меня есть JSON объект неизвестной сложности, который может содержать другие объекты, массивы или свойства строки .
Например, у меня может быть такой объект:
let json = {
id: "foo",
rows: [
{
class: "blah",
cols: [
{
class: "haha"
},{
class: "bar"
},{
class: "baz"
}
]
},
{
class: "yada"
}
]
}
* Примечание (для ясности): объект может иметь сильно различающуюся структуру. У него могут быть перевернутые строки и столбцы, или они могут быть вложены глубже, или их нет вообще. Могут быть или не быть идентификаторы или классы на любом из объектов *
Мне нужно перебрать этот объект и "преобразовать" его в html структуру, например:
<div id = "foo" data-type = "rows">
<div class = "blah" data-type = "cols">
<div class = "haha"></div>
<div class = "bar"></div>
<div class = "baz"></div>
</div>
<div class = "yada"></div>
</div>
где каждый объект - это (возможно, вложенный) элемент div, а свойства строки - это атрибуты этого элемента div, а ключи массива указывают тип.
Вот что я получил в настоящее время:
function iterateJsonToHTML(frame) {
let content = document.createElement("div");
let iterator = function(frame, content) {
for (let [key, value] of Object.entries(frame)) {
if (Array.isArray(value) || (typeof value === "object" && value !== null) ) {
if (Array.isArray(value)) {
iterator(value, content);
} else if (typeof value === "object") {
let element = document.createElement("div");
content = content.appendChild(element);
iterator(value, content);
}
} else {
// dealing with attributes here. Not sure how to parse multiple of these.
}
}
};
iterator(frame, content);
return content;
}
Это создает HTML структуру, но не ту, которую я ожидаю:
<div>
<div>
<div>
<div>
<div></div>
</div>
</div>
<div></div>
</div>
</div>
У него правильное число div
с, они просто как-то поворачиваются.
Итак, мой вопрос прост:
Где я ошибаюсь в своей рекурсии?