Question

我正在尝试使用Javascript提取api并输出接收到的json

我有一个例子here，但我什么都没显示

我不确定要看哪里。谁能为我指出正确的方向

let output

const fetchData = async () => {
  const api_call = await fetch('https://jsonplaceholder.typicode.com/posts')

  const data = await api_call.json();

  return{data}
}

const showData = () => {
  fetchData()
    .then((res) => {

      console.log(res.title)

      output +=
      `<div>
        <ul>
          <li>Title: ${res.title}</li>
          <li>Body: ${res.body}</li>
        </ul>
      </div>`;
    })

  document.getElementById('root').innerHTML = output
}


showData()

Answer 1

它确实有效，我认为您的代码有点奇怪。请参阅以下代码段：

const fetchData = () => 
  fetch('https://jsonplaceholder.typicode.com/posts')
  .then(res => res.json());
  
fetchData().then(res => {
  let output;
  res.forEach(r => {
    output += `<div>
      <ul>
        <li>Title: ${r.title}</li>
        <li>Body: ${r.body}</li>
      </ul>
    </div>`;
  });
  document.getElementById('root').innerHTML = output;
});

<div id="root"></div>

Answer 2

两个主要问题是：

您从{ data }返回fetchData()的方式。应该将其重写为return data;，以确保直接返回数组
从fetchData()返回的数据需要被视为一个数组。在.then()块中，可以使用for .. of循环进行迭代，并将fetchData()响应中的所有数据格式化为HTML的“ root” div

let output

const fetchData = async() => {
  const api_call = await fetch('https://jsonplaceholder.typicode.com/posts')

  const data = await api_call.json();

  /* Remove the { and } from around data */
  return data
}

const showData = () => {

  /* The json data is an array which we'll call rows */
  fetchData().then((rows) => {

    let output = '';
    
    /* Iterate each row of rows array and add item data to output */
    for (const row of rows) {

      output +=
        `<div>
        <ul>
          <li>Title: ${row.title}</li>
          <li>Body: ${row.body}</li>
        </ul>
      </div>`;
    }

    /* Populate dom with generated html */
    document.getElementById('root').innerHTML = output;
  })

}


showData()

<div id="root"></div>

Answer 3

您的代码中有两个问题。

1。

.then((res) => {}

返回一个对象。该对象的实际数据是 res.data ，它是由100个元素组成的数组。要获取所有元素，您必须使用for循环对其进行迭代。

for (var a = 0; a < res.data.length; a++) {
  // handle data here
  title = res.data[a].title; // for example the title
}

2。遍历此数组后，应立即更新根目录DIV。目前，您在json数据可用之前就对其进行了更新。

这是完整的示例：

let output

const fetchData = async () => {
  const api_call = await fetch('https://jsonplaceholder.typicode.com/posts')

  const data = await api_call.json();

  return {
    data
  }
}

const showData = () => {
  fetchData()
    .then((res) => {

      for (var a = 0; a < res.data.length; a++) {
        output +=
          `<div>
        <ul>
          <li>Title: ${res.data[a].title}</li>
          <li>Body: ${res.data[a].body}</li>
        </ul>
      </div>`;
      }
      document.getElementById('root').innerHTML = output;
    })


}


showData()

<div id="root"></div>

如何使用JavaScript获取API和显示数据

3 个答案: