javascript - 使用javascript从Json获取数据(jsonplaceholder)

Question

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

https://jsonplaceholder.typicode.com/posts/1

我试图使用此代码从文件中获取数据:

https://github.com/typicode/jsonplaceholder#how-to

这是我在函数中编写的内容:

JS:

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
}

HTML:

<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>

所以我应该在点击 .news-btn-div DIV 后获取数据，但我不明白我在哪里犯了错误。

printTitle 和 #printBody DIVS 应填充数据。

有什么建议吗？

这是我的 Jsfiddle:

https://jsfiddle.net/matteous1/ywh0spga/

Answer 1

您在第二次提取回调中遇到了一些错误。您需要从 json 对象(您为 response.json() 回调指定的名称)获取数据。然后访问 json 的适当元素以打印它们。正如 @Clint 指出的，您在使用收到的数据(title、body)之前关闭了回调，您试图在其范围之外访问它。

function req1() {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(json => {
      const title = json.title;
      const body = json.body;
      document.getElementById("printTitle").innerHTML = title;
      document.getElementById("printBody").innerHTML = body;
    });
}

req1();

<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">
        TITLE
        <span id="printTitle">
        </span>
      </div>
      <div class="news-content-1">
        BODY
        <span id="printBody">
        </span>
      </div>
    </div>