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

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>