Блог

Главная - Вопросы по программированию - Отображение объекта js из консоли на html — страницу

Отображение объекта js из консоли на html — страницу

#fetch #display

Вопрос:

Я изучаю api и запрос с помощью fetch. Я студент. Я не могу понять, почему, когда я поступаю так, как мой учитель, все идет правильно, но когда мне приходится адаптировать код для моей личной работы, он работает не так, как я ожидаю ; лол…

Я хочу отобразить на веб-странице результат моего запроса, я могу получить массив в своей консоли, но не могу отобразить его на своей веб-странице. Не мог бы кто-нибудь помочь мне найти решение, пожалуйста. Спасибо! С уважением.

 const url = 'https://reqres.in/api/users?page=2';

асинхронная функция getUsers() {
запрос const = ожидание выборки(url, {
метод: ‘GET’,
});

 if (!request.ok) {
    alert("y'a une couille dans l'beurre!");
} else {
    let datas = await request.json(); // on récupère les données en json et on en fait un objet js;
    /* console.log(datas); */

    document.querySelector('.users').textContent = datas.data[0];
    console.log(datas.data);
}
// on va stocker fetch dans variable : const request;
//await veur dire qu'on va attendre fetch

}

Получатели();

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

1. что же все-таки появилось на экране?

Ответ №1:

кстати, вы не можете просто отображать или вводить все object данные в textContent . datas.data[0] является object источником данных. Что вы можете сделать вместо этого, так это:-

A. Просто выберите одну информацию для отображения
 document.querySelector('.users').textContent = datas.data[0].email
B. Просто введите весь новый HTML
 document.querySelector('.users').innerHTML = `
 <h2>${datas.data[0].first_name} ${datas.data[0].last_name} (ID: ${datas.data[0].id})</h2>
 <p>${datas.data[0].email}</p>
`
C. Ввести все доступные данные
 datas?.data?.map((item) => {
  let html = `
    <h2>${item?.first_name} ${item?.last_name} (ID: ${item?.id})</h2>
    <p>${item?.email}</p>
  `;
  document.querySelector(".users").insertAdjacentHTML("beforeend", html);
});

Вы можете увидеть рабочий пример здесь: https://codesandbox.io/s/thirsty-hypatia-n3cpn?file=/src/index.js:484-722

Метки: