Ошибка 'TypeError: Cannot read property 'appendChild' of undefined' при выводе json в виде doom дерева

103

07 марта 2022, 06:50

Есть данные json, полученные с сервера. Пытаюсь вывести их в виде дерева на страничку html. При загрузке страницы часть данных списка отображается, подпункты не видны. Консоль выдает ошибку TypeError: Cannot read property 'appendChild' of undefined. Подскажите пожалуйста, как это можно исправить. Буду рад советам

let d = document, container = d.querySelector('#container'), arr = [], box = [], list = []; 
 
let xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
        let data = JSON.parse(this.responseText); 
        JSON.stringify(data); 
        console.log(data); 
 
        function createTree(container, data) { 
            container.append(createTreeDom(data)); 
        } 
 
        function createTreeDom(data) { 
 
            // super 
            for (let x in data) { 
                if (typeof data[data[x].parent_id] == 'undefined') { 
                    let div = d.createElement('div'), h3 = d.createElement('h3'); 
                    h3.innerHTML = data[x].name; 
                    div.appendChild(h3); 
                    container.appendChild(div); 
                    box[x] = div; 
                } else { 
                    list[x] = {'parent_id': data[x].parent_id, 'name': data[x].name}; 
                } 
            } 
            data = []; 
            arr = []; 
            // category 
            for (let x in list) { 
                if (typeof box[list[x].parent_id] != 'undefined') { 
                    let ul = d.createElement('ul'), h4 = d.createElement('h4'); 
                    h4.innerHTML = list[x].name; 
                    box[list[x].parent_id].appendChild(h4); 
                    box[list[x].parent_id].appendChild(ul); 
                    data[x] = ul; 
                } else { 
                    arr[x] = {'parent_id': list[x].parent_id, 'name': list[x].name}; 
                } 
            } 
            // items 
            for (let x in arr) { 
                let li = d.createElement('li'); 
                li.innerHTML = list[x].name; 
                data[arr[x].parent_id].appendChild(li); 
            } 
        } 
 
        let container = document.getElementById('container'); 
        createTree(container, data); 
    } 
}; 
 
xmlhttp.open("GET", 'http://test1.web-gu.ru/', true); 
xmlhttp.send();

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <script src="js/main.js" defer></script> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <title>Json</title> 
</head> 
<body> 
<div id="container"></div> 
 
 
</body> 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не убирается класс .active

Что я делаю не так? Хочу убрать классactive при повторном клике, а он заново добавляется

149

HTML

Как проложить несколько изображений в background, что бы они повторялись всю высоту body?

Мне необходимо задать несколько background для body, что бы они повторялись на всю высоту страницыНо ::before и ::after либо сталкивают весь контент вниз,...

HTML