Код ниже должен считывать данные из json файла и выводить в блок класса .albums в виде списка ul. Проблема в том, что он сначала выводит открывающий и закрывающий тег ul, и только потом запускает функцию .each(). Как заставить его выполнять операции последовательно? Придётся вписывать промисы?
$(document).ready(function() {
$.getJSON('ссылочка', function (data) {
let items = [];
items.push('<div>');
$.each(data, function (key, datum) {
items.push('<ul id="' + key + '">');
$.each(datum, function (key_of_datum, val) {
items.push('<li style="margin-bottom: 10px" id="' + key_of_datum + '">' + val + '</li>');
});
items.push('</ul>');
});
items.push('</div>');
items.join('');
$('.albums').html(items);
});
});
Данные на входе:
[
{
"userId": 3,
"id": 21,
"title": "repudiandae voluptatem optio est consequatur rem in temporibus et"
},
{
"userId": 3,
"id": 22,
"title": "et rem non provident vel ut"
},
{
"userId": 3,
"id": 23,
"title": "incidunt quisquam hic adipisci sequi"
},
{
"userId": 3,
"id": 24,
"title": "dolores ut et facere placeat"
},
{
"userId": 3,
"id": 25,
"title": "vero maxime id possimus sunt neque et consequatur"
}
]
Что получается:
<div class="albums">
<div></div>
<ul id="0"></ul>
<li style="margin-bottom: 10px" id="userId">3</li>
<li style="margin-bottom: 10px" id="id">21</li>
<li style="margin-bottom: 10px" id="title">repudiandae voluptatem optio est consequatur rem in temporibus et</li>
<ul id="1"></ul>
<li style="margin-bottom: 10px" id="userId">3</li>
<li style="margin-bottom: 10px" id="id">22</li>
<li style="margin-bottom: 10px" id="title">et rem non provident vel ut</li>
<ul id="2"></ul>
<li style="margin-bottom: 10px" id="userId">3</li>
<li style="margin-bottom: 10px" id="id">23</li>
<li style="margin-bottom: 10px" id="title">incidunt quisquam hic adipisci sequi</li>
<ul id="3"></ul>
<li style="margin-bottom: 10px" id="userId">3</li>
<li style="margin-bottom: 10px" id="id">24</li>
<li style="margin-bottom: 10px" id="title">dolores ut et facere placeat</li>
<ul id="4"></ul>
<li style="margin-bottom: 10px" id="userId">3</li>
<li style="margin-bottom: 10px" id="id">25</li>
<li style="margin-bottom: 10px" id="title">vero maxime id possimus sunt neque et consequatur</li>
<ul id="5"></ul>
<li style="margin-bottom: 10px" id="userId">3</li>
<li style="margin-bottom: 10px" id="id">26</li>
<li style="margin-bottom: 10px" id="title">quibusdam saepe ipsa vel harum</li>
<ul id="6"></ul>
<li style="margin-bottom: 10px" id="userId">3</li>
<li style="margin-bottom: 10px" id="id">27</li>
<li style="margin-bottom: 10px" id="title">id non nostrum expedita</li>
<ul id="7"></ul>
<li style="margin-bottom: 10px" id="userId">3</li>
<li style="margin-bottom: 10px" id="id">28</li>
<li style="margin-bottom: 10px" id="title">omnis neque exercitationem sed dolor atque maxime aut cum</li>
<ul id="8"></ul>
<li style="margin-bottom: 10px" id="userId">3</li>
<li style="margin-bottom: 10px" id="id">29</li>
<li style="margin-bottom: 10px" id="title">inventore ut quasi magnam itaque est fugit</li>
<ul id="9"></ul>
<li style="margin-bottom: 10px" id="userId">3</li>
<li style="margin-bottom: 10px" id="id">30</li>
<li style="margin-bottom: 10px" id="title">tempora assumenda et similique odit distinctio error</li>
</div>