使用javascript（jsonplaceholder）从Json获取数据

我一直在尝试在HTML页面上打印Json文件的数据。我需要导入这些数据：

我试图使用以下代码从文件中获取数据：

这是我在函数中写的：

JS:

HTML:

2

所以我应该在点击后获得数据。新闻btn div div但是我不知道我犯了什么错误

printTitle和#printBody div应填充数据。 有什么建议吗

这是我的签名：

---

在第二次回叫提取时出现了一些错误。您需要从

json

对象（您为

response.json（）

回调提供的名称）获取数据。然后访问

json

的适当元素以打印它们。 正如@Clint指出的，您在使用收到的数据（

title

，

body

）之前关闭了回调，您试图在其范围之外访问它

功能需求1（）{
取（'https://jsonplaceholder.typicode.com/posts/1')
.then（response=>response.json（））
。然后（json=>{
const title=json.title；
const body=json.body；
document.getElementById（“printTitle”）.innerHTML=title；
document.getElementById（“打印体”）.innerHTML=body；
});
}
要求1（）
2
标题
身体
在第二次回叫获取时出现了一些错误。您需要从
json
对象（您为
response.json（）
回调提供的名称）获取数据。然后访问
json
的适当元素以打印它们。
正如@Clint指出的，您在使用收到的数据（
title
，
body
）之前关闭了回调，您试图在其范围之外访问它


功能需求1（）{
取（'https://jsonplaceholder.typicode.com/posts/1')
.then（response=>response.json（））
。然后（json=>{
const title=json.title；
const body=json.body；
document.getElementById（“printTitle”）.innerHTML=title；
document.getElementById（“打印体”）.innerHTML=body；
});
}
要求1（）
2
标题
身体
要添加到此答案，fetch是异步的，因此处理数据的任何代码都必须在回调中。在请求完成之前，任何外部内容都会触发。您好，非常感谢您的回答，我还尝试创建多个按钮，并在单击第二个按钮时显示第二个帖子，在单击第三个按钮时显示第三个帖子。为了做到这一点，我复制了函数，但我不明白如何使用第一个函数作为默认值。我想在每次加载页面时打开1号帖子，然后单击其他按钮，我就会看到其他帖子。目前，当我加载页面时，我会收到随机帖子。我正在编辑我的问题以使其更清楚。@Matteo，你最好用新的疑问开始一个新的问题，以避免与旧的问题混淆。要添加到此答案，fetch是异步的，因此任何处理数据的代码都必须在回调中。在请求完成之前，任何外部内容都会触发。您好，非常感谢您的回答，我还尝试创建多个按钮，并在单击第二个按钮时显示第二个帖子，在单击第三个按钮时显示第三个帖子。为了做到这一点，我复制了函数，但我不明白如何使用第一个函数作为默认值。我想在每次加载页面时打开1号帖子，然后单击其他按钮，我就会看到其他帖子。目前，当我加载页面时，我会收到随机帖子。“我正在编辑我的问题以使它更清楚。@Matteo，你最好用新的疑问开始一个新问题，以免与旧问题混淆。”。
function req1() {
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(json => console.log(json))
        // we print the title and the body of the post recived
    var title = response.data.title;
    var body = response.data.body
    document.getElementById("printTitle").innerHTML = title
    document.getElementById("printBody").innerHTML = body
}

<div class="news-btn-div" data-tab="news-2" onclick="req1()">2</div>

    <div id="news-2" class="news-content-container-flex">
      <div class="news-title">
        <span id="printTitle">
        </span>
      </div>
      <div class="news-content-1">
        <span id="printBody">
        </span>
      </div>
    </div>