使用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）之前关闭了回调，您试图在其范围之外访问它。

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;