如何在html中显示获取的数据

Question

我正在获取待办事项列表，我想知道为什么当我这样做时它会给我undefined

.then((response) => {
  response.json();
  }

它适用于

.then(response => response.json())

为什么会这样？

另外，当我获取数据时，它们是对象，我将它们保存在数组中

  completed: true,
  id: 199,
  title: "numquam repellendus a magnam",
  userId: 10
},

等等。

现在，我有 html 模板，我想将它加载到我的样式所在的 html 中，我该怎么做？

<div class="card">
<p>//Want Id here</p>
<strong>// Want Title here</strong>
</div>

获取代码：

let todos = [];

function fetchData() {
    fetch('https://jsonplaceholder.typicode.com/todos').then(response => response.json())
  .then((json) => {
    todos = json;
    console.log(todos);
  })
  }

fetchData();

Answer 1

你为什么不用template literals？

我的建议：

let todos = [];

fetchData();

function fetchData() {
  fetch('https://jsonplaceholder.typicode.com/todos')
    .then(response => response.json())
    .then(json => todos = json)
    .then(() => {
      for (let item of todos) {
        toAppend.innerHTML += `
<div class="card">
<p>${item.id}</p>
<h2>${item.title}</h2>
</div>
`;
      }
    });
}

<div id="toAppend"></div>

无论如何，如果您只需要显示获取的项目，则可以使用另一种更简单的解决方案：

const fetchData = async() => (await fetch('https://jsonplaceholder.typicode.com/todos')).json();

fetchData()
  .then(data => {
    for (let item of data) {
      toAppend.innerHTML += `
<div class="card">
<p>${item.id}</p>
<h2>${item.title}</h2>
</div>
`;
    }
  });

<div id="toAppend"></div>

这里的fetchData() 是asynchronous function。

Answer 2

.then((response) => {
  response.json();
})

上面的这个函数不返回任何东西。它会 response.json() 但不会返回它。

您需要添加return，以便将其传递给下一个.then()：

.then((response) => {
  return response.json();
})

这会奏效。但是 ES6 提供了一个很好的语法糖：

.then(response => response.json())

没有大括号，response.json() 将被返回，而您不必显式写 return。

这就是大括号和不带大括号的区别。

但是有一个更好的方法来处理它，使用 async/await ：

let todos = [];

async function fetchData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    const todos = await response.json();
    console.log(todos);
}

fetchData();