json 无法访问获取API请求的结果

xxhby3vn 于 2023-11-20 发布在其他

关注(0)|答案(2)|浏览(92)

我一直试图从我的获取API请求访问数组结果.我可以得到的结果返回和解析它从JSON到JavaScript对象.然而，我不能访问的结果.数组是返回调用的结果.我想知道我错过了什么.该项目的最终目的是从API获得12随机配置文件，并让它显示到卡div.错误消息，我是得到的是：
'Uncaught（in promise）TypeError：Cannot read property 'results' of undefined at app.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));

型

JSON

来源：https://stackoverflow.com/questions/60950868/cant-access-get-results-from-fetch-api-request

2条答案

按热度按时间

sshcrbum1#

错误很明显，你在data中得到的对象没有定义，这就是为什么它没有result键。
检查数据是否来自URL。当我获取URL时，会有JSON传入。
还要注意的是，在第二个then中，你用来调试的是没有返回data变量，这就是为什么你之后什么也没有得到。
添加一个return语句，如：return data;
有关catch部分的额外信息来自docs：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API，如果你想检查错误，请查看响应中的状态代码。
从fetch（）返回的Promise不会在HTTP错误状态下拒绝，即使响应是HTTP 404或500。相反，它会正常解析（ok status设置为false），并且它只会在网络故障或任何事情阻止请求完成时拒绝。

赞(0）回复(0）举报 2023-11-20

ct3nt3jp2#

更改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）回复(0）举报 2023-11-20

我来回答

json 无法访问获取API请求的结果

2条答案

相关问题

热门标签

最新问答