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

fgw7neuy  于 2023-06-25  发布在  其他
关注(0)|答案(2)|浏览(105)

**关闭。**此题需要debugging details。目前不接受答复。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答这个问题。
13天前关闭。
Improve this question
我试图用JavaScript获取一个API,它工作,但我不知道如何使其可读。这是我的代码:

这是输出:

我已经在ES6上做过好几次了,但我不明白如何在vanilla中做到这一点。我猜是新手问的问题,但我会感谢一些帮助。先谢谢你了!
我尝试添加JSON.stringify(data,null,2);但没有用我还尝试通过在数据后面添加端点名称来获取一些端点,但结果什么也没有显示。

9lowa7mx

9lowa7mx1#

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元素,它将单独显示每个项目。

tzdcorbm

tzdcorbm2#

您需要解析并提取这些位。
比如像这样

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/1280@40.jp 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>

相关问题