Блог

Главная - Вопросы по программированию - Как отобразить список элементов в виде списка в HTML из массива Javascript из API?

Как отобразить список элементов в виде списка в HTML из массива Javascript из API?

#javascript #html #axios

#javascript #HTML #axios

Вопрос:

Мой JS-код таков, но я хочу иметь возможность moves отображать массив в HTML в формате списка, как я могу это сделать?

 const getData = () => {
  axios
    .get(" https://pokeapi.co/api/v2/pokemon/charmander")
    .then((response) => {
      const stats = response.data.moves;
      const moves = stats.map((obj) => {
        return obj.move.name;
      });
    })
    .catch((error) => console.log(error));
};

Ответ №1:

Вы можете использовать безопасный помощник для заполнения узла на странице, скажем <div id="list"></div> , чтобы ваш код мог делать что-то вроде:

 import {render, html} from '//unpkg.com/uhtml?module';

const getData = () => {
  axios
    .get(" https://pokeapi.co/api/v2/pokemon/charmander")
    .then((response) => {
      const stats = response.data.moves;
      render(document.getElementById('list'), html`
        <ul>
          ${stats.map((obj) => html`<li>${obj.move.name}</li>`)}
        </ul>
      `);
    })
    .catch((error) => console.log(error));
};

Это также будет правильно при следующем вызове getData в случае изменения данных.

Комментарии:

1. В настоящее время я использую vanilla JS. Я получаю эту ошибку TypeError: WeakMap key must be an object, got key или мне тоже нужно что-то добавить в свой HTML?

2. вы должны быть уверены document.getElementById('list') , что это не null

3. теперь отлично работает. Я понял, что ввел свой идентификатор не в тот HTML-элемент

4. Я просто хочу спросить еще кое-что и исследовать немного больше. Что такое модуль рендеринга, который мы импортировали сюда?

Ответ №2:

Вот предложение, не требующее библиотеки (только VanillaJS) :

 const getData = () => {
    axios
      .get(" https://pokeapi.co/api/v2/pokemon/charmander")
      .then((response) => {
        const stats = response.data.moves;
        // Create <ul> tag
        const ul = document.createElement('ul');
        stats.forEach((obj) => {
            // Create <li> tag
            const li = document.createElement('li');
            // Add text to <li>
            li.textContent = obj.move.name;
            // Append <li> to <ul>
            ul.appendChild(li);
        });

        // Append <ul> somewhere in your DOM
        document.getElementById('ul_parent').appendChild('ul');

      })
      .catch((error) => console.log(error));
};

Комментарии:

1. Я получаю TypeError: document.getElementById(...) is null сообщение об ошибке, а также данные, которые я получаю от своего API, находятся внутри return obj.move.name после того, как я повторяю stats переменную

Метки: