Javascript 无法读取属性'；地图'；即使在控制台中以异步方式正确获取API后，仍存在未定义的

嗨，我正在尝试使用JS创建一个基于API的新闻搜索webapp。这是我得到错误的函数

async function fetchUsers(searchTerm, searchLimit, sortBy){
//RETURNS PROMISES
let url=`some api parameters searchTerm, SearchLimit and sorby is passed`;

const res=await fetch(url);
const data=await res.json();
const article = [];


document.getElementById("container").innerHTML=`
${data.article.map(function(post){
  //NEWSCARD
  return(`
  <ul id="news-article" style="list-style-type:none;">
    <li class="article">
      <div class="card mb-2">
        <img class="article-image" class="card-img-top" src="${post.urlToimage}" alt="Card image cap">
        <div class="card-body">
          <h2 class="article-title" class="card-title">${post.title}</h2>
          <p class="article-description" class="card-text">${truncateString(post.selftext, 100)}</p>
          <a class="article-link" href="${post.url}" target="_blank
          " class="btn btn-primary">Read More</a>
          <hr>
          <span class="article-author" class="badge badge-secondary">Subreddit: ${post.subreddit}</span> 
          <span class="badge badge-dark">Score: ${post.score}</span>
        </div>
      </div>
    </li>
  </ul>
  `)
}
 .join('') 
  )}} fetchUsers();

异步函数fetchUsers（searchTerm、searchLimit、sortBy）{ //回报承诺 让url=`一些api参数searchTerm、SearchLimit和sorby被传递'； const res=等待获取（url）； const data=wait res.json（）； 常量条=[]； document.getElementById（“容器”）.innerHTML=` ${data.article.map（函数（post）{ //新闻卡 返回(`

• ${post.title}

  ${truncateString（post.selftext，100）}

  ---

  Subreddit:${post.Subreddit} 分数：${post.Score}

`) } .加入（“”） )}}fetchUsers（）； 主要错误出现在${data.article.map（函数（post））上{

有人能提出可能的原因吗

---

感谢

发生的事情是正在异步调用document.getElementByid节，可能是在数据没有返回任何内容，或者甚至没有声明article变量时，您可以尝试以下操作：

async function getData() {
    const res = await fetch(url);
    const data = await res.json();

    populateList(data);
}

function populateList(article) {
    const innerHTML = article.map(post => `
    <ul id="news-article" style="list-style-type:none;">
        <li class="article">
            <div class="card mb-2">
                <img class="article-image" class="card-img-top" src="${post.urlToimage}" alt="Card image cap">
                <div class="card-body">
                    <h2 class="article-title" class="card-title">${post.title}</h2>
                    <p class="article-description" class="card-text">${truncateString(post.selftext, 100)}</p>
                    <a class="article-link" href="${post.url}" target="_blank" class="btn btn-primary">Read More</a>
                    <hr>
                    <span class="article-author" class="badge badge-secondary">Subreddit: ${post.subreddit}</span> 
                    <span class="badge badge-dark">Score: ${post.score}</span>
                </div>
            </div>
        </li>
    </ul>
    `);

    document.getElementById('container').innerHTML = innerHTML;
}

异步函数getData（）{ const res=等待获取（url）； const data=wait res.json（）； 民众名单（数据）； } 函数populateList（文章）{ const innerHTML=article.map（post=>`

• ${post.title}

  ${truncateString（post.selftext，100）}

  ---

  Subreddit:${post.Subreddit} 分数：${post.Score}

`); document.getElementById（'container'）。innerHTML=innerHTML； }

---

您也可以在不使用

async

和

wait

关键字的情况下执行此操作，只需在

语句中使用回调即可。然后

语句如下：

function fetchUsers(searchTerm, searchLimit, sortBy){

  let url=`some url based on params`;

  fetch(url)
    .then( res => res.json() )
    .then( data => populateList(data) )

}

function populateList(data) {
    const innerHTML = data.articles.map(post => `
    <ul id="news-article" style="list-style-type:none;">
        <li class="article">
            <div class="card mb-2">
                <img class="article-image" class="card-img-top" src="${post.urlToimage}" alt="Card image cap">
                <div class="card-body">
                    <h2 class="article-title" class="card-title">${post.title}</h2>
                    <p class="article-description" class="card-text">${truncateString(post.selftext, 100)}</p>
                    <a class="article-link" href="${post.url}" target="_blank" class="btn btn-primary">Read More</a>
                    <hr>
                    <span class="article-author" class="badge badge-secondary">Subreddit: ${post.subreddit}</span> 
                    <span class="badge badge-dark">Score: ${post.score}</span>
                </div>
            </div>
        </li>
    </ul>
    `);

    document.getElementById('container').innerHTML = innerHTML;
}

fetchUsers(searchTerm, searchLimit, sortBy);

函数fetchUsers（searchTerm、searchLimit、sortBy）{
让url=`基于参数的某个url`；
获取（url）
.then（res=>res.json（））
.然后（数据=>populateList（数据））
}
函数populateList（数据）{
const innerHTML=data.articles.map（post=>`


${post.title}
${truncateString（post.selftext，100）}

Subreddit:${post.Subreddit}
分数：${post.Score}


`);
document.getElementById（'container'）。innerHTML=innerHTML；
}
fetchUsers（searchTerm、searchLimit、sortBy）；

另外，劫持Misir Jafarov的评论，你的

数据

对象中的数组被称为

文章

，但是你试图从

文章

映射。我觉得如果没有这个打字错误，你仍然会有问题，但这肯定会让你挂断。谢谢@Misir Jafarov

这个问题（通过观察控制台中的错误）您的代码试图访问一个不存在的属性

如果无法访问您正在使用的确切数据，就不可能通知您确切的问题是什么。但是，以下是我将采取的一些步骤来诊断问题：

在分配

数据

后立即设置断点（

调试器

）或

控制台.log（data）

，以便您可以观察它

在浏览器的开发工具中单击

数据

变量，或者检查代码以编程方式做出的假设

在以编程方式检查代码假设方面：

通过运行

typeof data

应返回

object

通过运行

对象（数据）。hasOwnProperty（'article'）

通过运行

array.isArray（data.article）

验证

数据

中的每一篇

文章

都有

自文本

，

子Reddit

，

分数

（使用步骤2）

---

我的猜测是，在这个过程中，您会发现代码和数据之间存在不一致。如果没有，我想知道您的位置。

缩小范围并找到问题的唯一方法是首先以干净的方式编写代码

我建议您将代码分解为可管理的部分，并尝试使用调试器或控制台在浏览器中调试功能。log（）工作得非常好

还有更好的选择，比如你可以在哪里编写代码，并在代码的帮助下进行测试，以获得更多的信心

注意：伪代码
函数getPosts（）{
返回岗位
}
函数renderPost（post）{
返回`${post}`
}
函数render（）{
const posts=getPosts（）
console.info（'post->'，posts）
const postsMarkup=posts.map（（post）=>renderPost（post））.join（“”）；
console.info（'postsMarkup->'，postsMarkup）
document.getElementById（'container'）.innerHTML=邮戳
}

也许可以检查

数据是否不为空？什么是
res.json（）
返回？是否有
.article
在其中？是否为空？请显示您的api响应。我尝试使用console.log检查数据，它在控制台中正确返回api的数据。如何异步调用其函数中的一段代码？不确定
NOTE: pseudo code
function getPosts() { 
   return posts
}

function renderPost(post) { 
   return `<div>${post}</div> ` 
}

function render() {
   const posts = getPosts()
   console.info('post -> ', posts)
   const postsMarkup = posts.map((post) => renderPost(post)).join('');
   console.info('postsMarkup -> ', postsMarkup)
   document.getElementById('container').innerHTML = postMarkup
}