Не могу получить доступ к результатам получения запроса API - PullRequest
Новая
       2

Не могу получить доступ к результатам получения запроса API

0 голосов
/ 31 марта 2020

Я пытался получить доступ к результатам массива из моего запроса API fetch. Я могу получить результаты для возврата и проанализировать его из json в javascript объект. Однако я не могу получить доступ к результатам. Массив является возвращаемым, называемым результатами. Мне интересно, чего мне не хватает. Конечная цель проекта - получить 12 случайных профилей из API и отобразить их на карте Div. Я получаю сообщение об ошибке: «Uncaught (in обещание)» TypeError: Невозможно прочитать «результаты» свойства undefined в приложении. js: 40 '

HTML

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Public API Requests</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link href="css/normalize.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
    </head>
    <body>


        <header>
            <div class="header-inner-container">
                <div class="header-text-container">
                    <h1>AWESOME STARTUP EMPLOYEE DIRECTORY</h1>
                </div>

                <div class="search-container">

                </div>
            </div>
        </header>

        <div id="gallery" class="gallery">

        </div>


    </body>
    <script type="text/javascript" src="app.js"></script>
</html>

Javascript


const gallery = document.getElementById('gallery');
const card = document.createElement('div');
card.classList.add('card');
gallery.appendChild(card);

function fetchData(url) {
    return fetch(url)
            .then(response => { return response.json()})
            .then(data => {console.log(data)})
            .catch(error => {console.log('Error with fetching API', error)})
          }

function generateInfo(data) {

   const info = data.map( item => `
    <div class="card-img-container">
        <img class="card-img" src="${data}" alt="profile picture">
    </div>
    <div class="card-info-container">
        <h3 id="name" class="card-name cap">${name.first} ${name.last}</h3>
        <p class="card-text">${data.email}</p>
        <p class="card-text cap">${location.city}</p>
    </div>
    `)

    card.innerHTML = info;
  }

fetchData('https://randomuser.me/api/')
  .then(data => generateInfo(data.results));

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Измените функцию fetchData, удалите блок .then, в который вы получаете окончательные данные, присоедините его при вызове fetchData 

function fetchData(url) {
    return fetch(url)
            .then(response => { return response.json()})
            .catch(error => {console.log('Error with fetching API',               
error)})}




fetchData('https://randomuser.me/api/')
   .then(data =>generateInfo(data.results)); //success to the final promise

Теперь для генерации информации используйте foreach () вместо map (). Так как для каждого Пользовательский объект, вам нужно создать карту. 

function generateInfo(results) {
   results.forEach( userObj =>{
    const card = document.createElement('div');
    card.classList.add('card');
    card.innerHTML = `
    <div class="card-img-container">
        <img class="card-img" src="${userObj.picture.thumbnail}" alt="profile picture">
    </div>
    <div class="card-info-container">
        <h3 id="name" class="card-name cap">${userObj.name.first} ${name.last}</h3>
        <p class="card-text">${userObj.email}</p>
        <p class="card-text cap">${userObj.location.city}</p>
    </div>
    `;
    gallery.appendChild(card);
    })
 }

Запустите следующий фрагмент, чтобы проверить, работает ли он. 

const gallery = document.getElementById('gallery');
function fetchData(url) {
    return fetch(url)
            .then(response => { return response.json()})
            .catch(error => {console.log('Error with fetching API',               error)})}
function generateInfo(results) {
   results.forEach( userObj =>{
    const card = document.createElement('div');
    card.classList.add('card');
    card.innerHTML = `
    <div class="card-img-container">
        <img class="card-img" src="${userObj.picture.thumbnail}" alt="profile picture">
    </div>
    <div class="card-info-container">
        <h3 id="name" class="card-name cap">${userObj.name.first} ${name.last}</h3>
        <p class="card-text">${userObj.email}</p>
        <p class="card-text cap">${userObj.location.city}</p>
    </div>
    `;
    gallery.appendChild(card);
    })
 }
fetchData('https://randomuser.me/api/')
  .then(data =>generateInfo(data.results));
<header>
            <div class="header-inner-container">
                <div class="header-text-container">
                    <h1>AWESOME STARTUP EMPLOYEE DIRECTORY</h1>
                </div>

                <div class="search-container">

                </div>
            </div>
        </header>

        <div id="gallery" class="gallery">

        </div>
0 голосов
/ 31 марта 2020

Ошибка очевидна, объект, который вы получаете в data, не определен, поэтому у него нет клавиши result.

Убедитесь, что данные поступают с URL. Когда я получаю URL-адрес, в него входит JSON.

Также обратите внимание, что во втором then, который у вас есть для отладки, не возвращается переменная data, и поэтому впоследствии вы ничего не получаете.

Добавьте оператор возврата, например: return data;

Дополнительная информация, относящаяся к части catch из документации: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API, если вы хотите проверить на наличие ошибок, посмотрите при коде состояния из ответа.

Обещание, возвращаемое функцией fetch (), не будет отклонено в статусе ошибки HTTP, даже если ответ является HTTP 404 или 500. Вместо этого он будет разрешен нормально (с ok status установлен в false), и он будет отклоняться только при сбое сети или если что-либо помешает завершению запроса.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...