Получить все данные из JSON и отобразить в HTML через класс метода - PullRequest
Новая
       6

Получить все данные из JSON и отобразить в HTML через класс метода

0 голосов
/ 25 ноября 2018

Я работаю с fetch api & json.После извлечения данных из data.json цикл forEach отображает только последний объект, превращающийся в элемент hmtl с помощью метода Class, где при записи console.log возвращаются все объекты из массива. 

class UI {
    displayData(name) {
        const list = document.getElementById('data');
        list.innerHTML = `<p>${name}</p>`;
    }
}

fetch ('./data/data.json')
    .then((response) => {
        return response.json();
    })
    .then((json) => {
        json.forEach(element => {
            const ui = new UI;
            ui.displayData(element)
        });

    });

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

Как вы отметили в своем ответе, никакой конкатенации не произошло, поэтому вы перезаписывали свои данные.

Я пишу этот ответ, чтобы предложить немного измененную версию того, что вы 'делаешь.Если вы просто объединяете произвольные данные в контексте HTML (что вы делаете со строкой шаблона), вы рискуете создать недопустимый HTML или даже столкнуться с проблемами безопасности.Вы должны экранировать данные для использования.Самый простой / лучший способ сделать это - вовсе не установить innerHTML, а innerText.Возможно, попробуйте что-то вроде этого ... не проверено, но вы должны начать. 

class UI() {
  getListItem(item) {
    const p = document.createElement('p');
    p.innerText = item;
    return p;
  }

  render(data) {
    const list = document.getElementById('data');
    data.map(this.getListItem).forEach((listItemP) => {
      list.appendChild(listItemP);
    });
  }
}

const ui = new UI();
fetch ('./data/data.json')
  .then((res) => res.json())
  .then(ui.render);
0 голосов
/ 28 ноября 2018

Проблема решена.

Добавьте «+» перед равным «=» в list.innerHTML в классе пользовательского интерфейса, чтобы добавить следующий элемент html в const «список».

...