0

Код ниже должен считывать данные из 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>

1 ответ 1

2

Единственная ошибка, это join('') не изменяет массив, а возвращает новую строку, результат которой надо куда-то поместить перед выводом.

let resultHtml = items.join('');

В остальном в этом коде нет ошибок, он синхронный внутри функции:

function test (data) {
    let items = [];
    items.push('<ul class="albums">');
    $.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('</ul>');
    let resultHtml = items.join('\n');
    $('.albums').text(resultHtml);
}

let data = [
  {
    "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"
  }
];

test(data)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre class="albums"></pre>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.