Хочу вывести на экран список в котором будут вставлены данные из массива полученные с серверной части.
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 элемент массива.
result
console.log(key, value)
и посмотрите что он выдает