我已经用 JS 获取了一个 API，但输出看起来很糟糕，我不知道如何修复它 [关闭]-解网

问：

闭。此问题需要调试详细信息。它目前不接受答案。

编辑问题以包括所需的行为、特定问题或错误以及重现问题所需的最短代码。这将帮助其他人回答这个问题。

5个月前关闭。

改进此问题

我正在尝试使用 Javascript 获取 API，它正在工作，但我无法弄清楚如何使其可读。这是我的代码：

JS code

这是输出：

How it looks like

我已经用 ES6 做过几次了，但我不明白如何在原版中做到这一点。我猜是新手问题，但希望得到一些帮助。提前致谢！

我试图添加JSON.stringify（data， null， 2）;但这无济于事。我还尝试通过在数据后添加端点名称来获取一些端点，但随后没有任何显示。

javascript json fetch-api 字符串化

function fetchData() {
  fetch(URL)
    .then(response => response.json())
    .then(data => {
      const dataContainer = document.getElementById('dataContainer');
      // Extracting and displaying specific data
      data.forEach(item => {
        const headline = item.headline;
        const paragraph = item.paragraph;
        const itemElement = document.createElement('div');
        itemElement.innerHTML = `<h2>${headline}</h2><p>${paragraph}</p>`;
        dataContainer.appendChild(itemElement);
      });
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

fetchData();

假定 API 响应数据是一个对象数组。data.forEach（）方法用于遍历数组中的每个对象。在循环中，将从每个对象中提取标题和段落属性。

为每个项目创建一个新的 div 元素，并使用模板文本设置其内容以包含提取的数据。这将创建一个结构化的 HTML 标记，其中标题作为 h2 元素，段落作为 p 元素。

最后，新创建的 div 元素将追加到网页上的 dataContainer 元素中，该元素将单独显示每个项目。

const data = [{"vignette":"","order":"1","imageUrl":"","headlinePrefix":"JUST NU: ","headline":"Polisanmäler — timmar innan match","paragraphPrefix":"","paragraph":"AIK agerar efter nya avgångskrave t"},{"vignette":"#v-826f4b23-1df4-42c4-b20f-75 1aaa520117","order":"2","imageUrl":"https://static.cdn-expressen.se/images/8f/d7/8fd7fe0e7cf3 4cd9aaef1d47c34369e1/16x6/1280.png","head linePrefix":"","headline":"Elias sköts ihjäl i Farsta: \"Han var bara ett barn\"","paragraphPrefix":"","paragraph":"15-åringens familj fick tvätta bort hans blod. \"Bråkade inte med någon\""}, {"vignette":"","order":"3","imageUrl":"https://stati c.cdn-expressen.se/images/54/b6/54b6560a8d ef4b889b4d6ab12652be80/16x6/[email protected] g","headlinePrefix":"","headline":"Fattar ingenting efter fruns sms - mitt i tv-sändningen","para graphPrefix":"","paragraph":"Alexander Axén om orden som skapade panik: \"Skrev att hon slåss\""}]


document.getElementById('dataContainer').innerHTML = data
  .map(item => `<h2><b>${item.headlinePrefix || ""}</b> ${item.headline}</h2>
<p>${item.paragraph}</p>`).join('<hr/>')

<div id="dataContainer"></div>

上一个：Spotify API 的响应中缺少“发布者”字段

下一个：为什么 NASA APOD Api 突然停止工作？

我已经用 JS 获取了一个 API，但输出看起来很糟糕，我不知道如何修复它 [关闭]

I have fetched an API with JS, but the output looks really bad and I don't know how to fix it [closed]

评论

评论