我正在try 从API获取数据.

到目前为止,我已经try 使用API获取数据.我一直在使用这个网站:https://www.geeksforgeeks.org/how-to-use-the-javascript-fetch-api-to-get-data/ 它当前对我的数组进行sole.log,但它不会显示在我创建的表行中. 我想我可能在我的html中创建了错误的行,但我不知道应该如何设置它们.请展示一个小例子或谷歌,如果这是什么是错误的.

The current error message i get is
Uncaught (in promise) TypeError: data.list is not iterable
    at show (news.js:37:21)
    at getapi (news.js:17:2)

我的脚本如下所示:


// api url
const api_url =
    "https:newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=xxxxxxxxx";

// Defining async function
async function getapi(url) {
    
    // Storing response
    const response = await fetch(url);
    
    // Storing data in form of JSON
    var data = await response.json();
    console.log(data);
    if (response) {
        hideloader();
    }
    show(data);
}
// Calling that async function
getapi(api_url);

// Function to hide the loader
function hideloader() {
    document.getElementById('loading').style.display = 'none';
}
// Function to define innerHTML for HTML table
function show(data) {
    let tab =
    `<tr>
    <th>Author</th>
    <th>Title</th>
    <th>Description</th>
    <th>Url</th>
    </tr>`;
    
    // Loop to access all rows
    for (let r of data.list) {
        tab += `<tr>
            <td>${r.author}</td>
            <td>${r.title}</td>
            <td>${r.description}</td>
            <td>${r.url}</td>
            </tr>`;
    }
    // Setting innerHTML as tab variable
    document.getElementById("news").innerHTML = tab;
}


<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="news.js"></script>
        <link rel="stylesheet" href="test.css" />
        <meta charset="UTF-8" />
        <meta name="viewport" 
              content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <!-- Here a loader is created which 
             loads till response comes -->
        <div class="d-flex justify-content-center">
            <div class="spinner-border" 
                 role="status" id="loading">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <h1>News</h1>
        <!-- table for showing data -->
        <table id="news"></table>
    </body>
</html>

推荐答案

这就是我最终要做的事情

const url = "xxxxxxx"
    fetch(url)
  .then((response) => response.json())              
  .then((data) => {
    console.log(data)

    let title = document.getElementById("title");
    title.innerText = data.articles[0].title;

    let title1 = document.getElementById("title1");
    title1.innerText = data.articles[1].title;

    let title2 = document.getElementById("title2");
    title2.innerText = data.articles[2].title;

    let title3 = document.getElementById("title3");
    title3.innerText = data.articles[3].title;

    let title4 = document.getElementById("title4");
    title4.innerText = data.articles[4].title;

    let title5 = document.getElementById("title5");
    title5.innerText = data.articles[5].title;
    });

然后是一个如下所示的p标记:

<p id="title1"></p>

诸若此类

Javascript相关问答推荐

JSDoc创建并从另一个文件导入类型

JS—删除对象数组中对象的子对象

Prisma具有至少一个值的多对多关系

VUE 3捕获错误并呈现另一个组件

Eval vs函数()返回语义

将异步回调转换为异步生成器模式

为什么可选参数的顺序会导致问题?

按下单键和多值

如何使用基于promise (非事件emits 器)的方法来传输数据?

删除加载页面时不存在的元素(JavaScript)

如何在Java脚本中对数据进行签名,并在PHP中验证签名?

使用线性插值法旋转直线以查看鼠标会导致 skip

如何修复错误&语法错误:不能在纯react 项目中JEST引发的模块&之外使用导入语句?

在JavaScript中将Base64转换为JSON

ComponentWillReceiveProps仍在React 18.2.0中工作

查找函数句柄的模块/文件

JAVASCRIPT|导入模块中断FOR循环

如何调用多个$HTTP.POST请求?

Chart.js根据 Select 显示数据

try 使用Reaction路由V5渲染多个布局