Logging .map() на консоль примерно показывает, что я хочу, но та же строка кода, добавленная через innerHTML, показывает только последний элемент

#javascript #arrays

#javascript #массивы

Вопрос:

После некоторого отслеживания переполнения стека я, наконец, создал учетную запись, и это мой первый раз, когда я задаю вопрос.

Итак, я недавно начал играть с API, чтобы улучшить веб-разработку. После создания приложения anime info, которое мне понравилось, я начал другой проект, но для команд и списков НХЛ, используя API отсюда: https://gitlab.com/dword4/nhlapi/-/blob/master/stats-api.md

Информация о команде и логотипы работают хорошо, но я пытаюсь составить список для каждой команды, и вот тут начинается моя поломка. Использование .map() в моей функции приводит к тому, что я хочу в консоли, но тот же код при добавлении в .innerHTML приводит только к имени последнего игрока, а не ко всему списку. Я добавил циклы for и попытался связать обещания, но безуспешно.

Если бы кто-нибудь мог указать мне правильное направление, я был бы очень признателен.

  function getRosterByID(teamID){
  fetch(`https://statsapi.web.nhl.com/api/v1/teams/${teamID}/roster`)
  .then(res => res.json())
  .then(data => {
    data.roster.map(players => {
      console.log(players.person.fullName);
      roster.innerHTML = `
      <div>
        <dl>
          <dt>${players.person.fullName}</dt>
        </dl>
      </div>`;
    }).join();
    roster.style.display = 'flex';
  });
}

1. roster.innerHTML = установит все содержимое в строку справа. Все, что существовало ранее в элементе, будет удалено. = Вместо этого вы хотите. Вы также должны удалить .map и использовать forEach вместо — .map is для создания нового массива, а не для общих побочных эффектов

Ответ №1:

Когда вы используете innerHTML, он не добавляется. Это абсолютная замена. Вы также не должны использовать map() в качестве цикла, для чего предназначен foreach .

Но с помощью map вы можете получить весь текст

  function getRosterByID(teamID){
  fetch(`https://statsapi.web.nhl.com/api/v1/teams/${teamID}/roster`)
  .then(res => res.json())
  .then(data => {
    const htmlOut = data.roster.map(players => {
      console.log(players.person.fullName);
      return  `
      <div>
        <dl>
          <dt>${players.person.fullName}</dt>
        </dl>
      </div>`;
    }).join('');
    roster.innerHTML = htmlOut;
    roster.style.display = 'flex';
  });
}

1. Спасибо, ваш пример выше действительно работает. Хотя, на всю жизнь, я не могу получить forEach. Снова консоль говорит, что я хочу, но все, добавленное к элементу HTML, показывает undefined .

2. map() — это способ сделать это. Я понятия не имею, почему ваш способ сделать это с помощью forEach не будет работать, не видя, что вы сделали.

3. Поэтому я тоже создал учетную запись jsfiddle, думая, что может быть немного проще показать, что я сделал. Окончательный вид выглядит немного не так, поскольку я не добавил медиа-запросы и логотипы команды.jpg не на скрипке. Закомментированный блок в функции getRosterByID — это то, что у меня работает, forEach в той же функции — это то, с чем я играю. Кроме того, если вы не возражаете дать небольшой отзыв о моем коде в целом, я был бы очень признателен. jsfiddle.net/naynayren/k8jg2mce/4