изменение innerHTML с помощью forEach () или map () l oop не работает надежно - PullRequest
Новая
       4

изменение innerHTML с помощью forEach () или map () l oop не работает надежно

0 голосов
/ 13 февраля 2020

Этот может быть уникальным, поэтому я надеюсь, что смогу немного разобраться здесь. Я разрабатываю серверное веб-приложение node.js, которое использует страницу HTML и сценарии для подключения к веб-API Spotify. Из скриптов / api он возвращает массив, который я использую вместе с forEach () или map () l oop (я пробовал оба), чтобы заполнить эти пробелы в HTML, которые отформатированы следующим образом: 

<div class="d-flex align-items-center">
 <div class="user-img" id="recP1" style="background-image: url(images/orangeRedgrad.jpg)"></div>
  <div class="pl-3">
   <p class="name" id="recN1">No Song Name</p>
   <span class="position" id="recA1">No Artist Name .-.</span>
  </div>
 </div>
</div>

Код, который заполняет эти пространства идентификаторов, выглядит следующим образом: 

    .then(function (data) {
        var x = 1;
        trackURIs = [];
        console.log(data);
        data.tracks.forEach((data) => {
            //the three console.logs in this section are to show that the array received the data.
            console.log(x + ':');
            console.log(data.name);
            console.log(data.artists[0].name);
            trackURIs.push(data.uri);
            document.getElementById("recP" + x + "").style.backgroundImage = "url(" + data.album.images[0].url + ")";
            document.getElementById("recN" + x + "").innerHTML = data.name;
            document.getElementById("recA" + x + "").innerHTML = data.artists[0].name;
            x += 1;
        });
        //console.log(trackURIs);
    });

Моя проблема в том, что пробелы от x = 11 до x = 20 заполнят первый раз, когда кто-то получает рекомендации, но каждый раз после этого они не меняются и оставляют там предыдущие данные. При поиске некоторых художников, они не будут заполнены даже в первый раз. Моя консоль показывает, что я получил данные, поэтому я застрял на том, почему 11-20 не отвечают только иногда.

Это верно как для forEach (), так и для map ().

При изменении количества песен, запрашиваемых API (скажем, от 20 до> 12), то же самое будет верно, если только первые 10 надежно изменены кодом, тогда как x = 11 и x = 12 могут быть только измените первый раз и ничего после этого или просто не сделайте это вообще.

На этом изображении показан второй прогон запроса 12 рекомендаций к песням, где первые 10 изменены, но 11 и 12 нет .

...