@mihail9108
Программист-самоучка.

Как вывести html дерево из json?

Добрый день. Пытаюсь решить задачу (нужно считать json с сайта и вывести его на страницу в форме дерева). Данные считал, успешно отображаются в консоли, вывести их не получается. Консоль браузера ругается на переполнение вызовов let catalogUl.
Для удобства выложил код здесь и в codepen.io
https://codepen.io/mihail9108/live/WNbzXxe
Буду рад Вашим советам
<!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>


let getJSON = function(url, callback) {

    let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';

    xhr.onload = function() {

        let status = xhr.status;

        if (status == 200) {
            callback(null, xhr.response);
        } else {
            callback(status);
        }
    };

    xhr.send();
};

getJSON('http://test1.web-gu.ru/',  function(err, data) {

    if (err != null) {
        console.error(err);
    } else {
        console.log(data);
    }

function createTree(container, obj) {
    container.append(createTreeDom(obj));
}

function createTreeDom(obj) {
    // если нет дочерних элементов, то вызов возвращает undefined
    // и элемент <ul> не будет создан
    if (!Object.keys(obj).length) return;

    let ul = document.createElement('ul');

    for (let key in obj) {
        let li = document.createElement('li');
        li.innerHTML = key;

        let catalogUl = createTreeDom(obj[key]);
        if (catalogUl) {
            li.append(catalogUl);
        }

        ul.append(li);
    }

    return ul;
}

let container = document.getElementById('container');
createTree(container, data);
});
  • Вопрос задан
  • 359 просмотров
Пригласить эксперта
Ответы на вопрос 1
gans5131
@gans5131
web-developer
Проверь работу createTreeDom(), вызов данной функции происходит бесконечно, пока браузер не вывалит ошибку, как раз которая наблюдается в консоли. (это однозначно)

Предположу, что if (!Object.keys(obj).length) return; работает не так как ожидается. (это не проверял)

И последнее. Если ты используешь parent_id, то необходимо перед применением createTreeDom() данные превратить в древовидную структуру и только потом отдавать их в createTreeDom(). Сейчас же они просто идут общим списком.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы