Вывод тегов с данными из массива используя jquery

Question

Хочу вывести на экран список в котором будут вставлены данные из массива полученные с серверной части.

function showRoot() {
$.ajax({
    url: 'app/main.php',
    type: 'get',
    success: function (data) {
        if (data) {
            let result = JSON.parse(data);
            $.each(result, function (key, value) {
                if (key === 0) {
                    $('#tree').append($("<ul style='list-style-type: none;'><li id='"+ value['id'] +"' " +
                        "parent_id='"+ value['parent_id'] +"'><p class='mb-0 pl-3'>" + value['text'] + "</p>" +
                        "<button class='delete btn btn-danger'>-</button><button class='add btn btn-success'>+</button<li></ul>"));
                }
            });
            $.each(result, function(i, item) {
                if (i > 0){
                    let r = item.id - 1;
                    $("#"+r).append($("<ul style='list-style-type: none;'><li id='"+ item['id'] +"' " +
                        "parent_id='"+ item['parent_id'] +"'><p class='mb-0 pl-3'>" + item['text'] + "</p>" +
                        "<button class='delete btn btn-danger'>-</button><button class='add btn btn-success'>+</button<li></ul>"));
                }
            });
        } else return "";
    }
});
}

То есть если в БД имеются какие либо данные то их нужно вывести на экран при этом 0 элемент нужно вставить в блок div с id='tree', а последующие данные в последний тег li

Вот как выглядит index.php

<body class="my-2 mx-3">
<button id="create-root" class="btn btn-success">Create root</button>
<div id="tree"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/script.js?35123123"></script>
</body>

js файл где вызывается метод showRoot

$(document).ready(function () {
$("#create-root").click(function () {
    createRoot($(this).siblings('li').attr('id'));
});
showRoot();
$('#tree').on('click', '.add', function () {
    createNode($(this).siblings('li').attr('id'));
});
$('#tree').on('click', '.delete', function () {
    deleteRoot($(this).siblings('li').attr('id'));
});
});

Результат должен быть такой:

<body class="my-2 mx-3">
<button id="create-root" class="btn btn-success">Create root</button>
<div id="tree">
<ul style='list-style-type: none;'>
    <li id='1' parent_id='0'>
        <p class='mb-0 pl-3'> Root </p>
        <button class='delete btn btn-danger'>-</button> 
        <button class='add btn btn-success'>+</button>
            <ul style='list-style-type: none;'>
            <li id='2' parent_id='1'>
                <p class='mb-0 pl-3'> Root </p>
                <button class='delete btn btn-danger'>-</button>
                <button class='add btn btn-success'>+</button >
            </li>
            </ul>
            <ul style='list-style-type: none;'>
            <li id='3' parent_id='1'>
                <p class='mb-0 pl-3'> Root </p>
                <button class='delete btn btn-danger'>-</button>
                <button class='add btn btn-success'>+</button >
                <ul style='list-style-type: none;'>
                <li id='4' parent_id='3'>
                    <p class='mb-0 pl-3'> Root </p>
                    <button class='delete btn btn-danger'>-</button>
                    <button class='add btn btn-success'>+</button >
               </li>
               </ul>
            </li>
            </ul>
    </li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/script.js?35123123"></script>
</body>

Не могу понять что сделано не верно так как выводится только 0 элемент массива.

Answer 1

Корректно работающий код получился следующим

$.each(result, function (key, value) {
if (value.parent_id === 0) {
$('#tree').append($("<ul style='list-style-type: none;'><li id='"+ value['id'] +"' " +
"parent_id='"+ value['parent_id'] +"'><p class='mb-0 pl-3'>" + value['text'] + "</p>" +
"<button class='delete btn btn-danger'>-</button> <button class='add btn btn-success'>+</button><li></ul>"));
}
});
$.each(result, function(i, item) {
if (item.parent_id > 0){
$('#' + item.parent_id).append($("<ul style='list-style-type: none;'><li id='"+ item['id'] +"' " +
"parent_id='"+ item['parent_id'] +"'><p class='mb-0 pl-3'>" + item['text'] + "</p>" +
"<button class='delete btn btn-danger'>-</button> <button class='add btn btn-success'>+</button><li></ul>"));
}
});

БЛОГ НА HUSL

Вывод тегов с данными из массива используя jquery

Ответы (1 шт):