如何在 HTML 中显示 100 个 json 数据？答案

【问题标题】：How can I display 100 json data in HTML?如何在 HTML 中显示 100 个 json 数据？
【发布时间】：2022-11-11 14:49:49
【问题描述】：

我是 html、css 和 javascript 的新手，我正在制作一个基本项目来学习。我将有 2 个页面：列表页面和详细信息页面。在列表页面中，我需要在 html 屏幕上显示帖子。我只在屏幕上显示帖子的标题和正文。我需要从https://jsonplaceholder.typicode.com/posts 获取帖子数据

我的列表页面的 HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <script src="fetch.js"></script>
        <title>List</title>
    </head>
    <body>
        <a>
            <h3><span id="title"> </span></h3>
            <p><span id="body"></span></p>
        </a>  
    </body> 
</html>

我的 JavaScript 代码：

const api_url='https://jsonplaceholder.typicode.com/posts/1';

async function getISS(){
   const response = await fetch(api_url);
   const data= await response.json();
   const { title, body } = data;


   document.getElementById('title').textContent=title;
   document.getElementById('body').textContent=body;
}

getISS();

如您在此处看到的，此代码仅显示 ID 为 1 的帖子： output

如何列出所有帖子的标题和正文？我应该使用循环吗？ JSON 中有 100 个帖子，我需要显示所有这些帖子的标题和正文。

【问题讨论】：

标签： javascript html css json api

【解决方案1】：

我在 React 中执行此操作的方法是在数据数组上使用 map 方法。你可以用 JavaScript 和 HTML 做同样的事情。本质上，您想要映射数据数组，并为您想要创建一个新元素的每个元素。像这样的东西：

const posts = [{name: "first", id: 1}, {name: "second", id: 2}]
posts.map((post) => //create the element);

由于您使用的是 API，posts 只是您从 API 获得的响应（应该是一个数组）

【讨论】：

【解决方案2】：

试试这个js：

async function getISS() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');

  const res = await response.json();
  let anstitle = '';
  let ansbody = '';
  res.map((item) => {
    anstitle += item.title;
    ansbody += item.body;
  })

  document.getElementById('title').textContent = anstitle;
  document.getElementById('body').textContent = ansbody;
}

getISS();

【讨论】：

【解决方案3】：

const api_url='https://jsonplaceholder.typicode.com/posts/';

async function getISS(){
   const response = await fetch(api_url);
   const data= await response.json();
   const { title, body } = data;

    let content = data.map((d,i)=> {
      return`<a>
            <span> post: ${+i+1} <span>
            <h3><span class="title"> ${d.title} </span></h3>
            <p><span class="body"> ${d.body} </span></p>
        </a>
        `
    })
   document.querySelector('body').innerHTML=content.join('');
}

getISS();

    <body>

    </body>

【讨论】：

【解决方案4】：

请注意您正在调用的 API 端点的链接-

const api_url='https://jsonplaceholder.typicode.com/posts/1';

您是在说，您想获得 id 为 1 的帖子。

尝试从api_url 变量中删除/1，它看起来像这样：

const api_url='https://jsonplaceholder.typicode.com/posts';

请注意，这将返回帖子的 JSON 数组，因此您可能需要修改 javascript 以显示您从 API 获得的所有帖子。

希望这可以帮助。

【讨论】：