我正在尝试显示从我的 API 获得的数据，但未显示我正在使用 JS 使用它答案

【问题标题】：I am trying to show my data obtained from my API but it is not shown I am consuming it with JS我正在尝试显示从我的 API 获得的数据，但未显示我正在使用 JS 使用它
【发布时间】：2021-12-19 05:03:12
【问题描述】：

我正在尝试显示从我的 API 获得的数据，但未显示我正在使用 JS。

fetch (" http://127.0.0.1:8000/api/vehiculo/ ") .then (res => res.json ()) .then (data => muestraData (data))

const muestraData = (data) => {
   let body = '' 
   for (let i = 0; i <data.length; i ++) {
    body + = <tr><td>${data[i].id}</td></tr> 
   }
   document.getElementById('data').innerHTML = body
}

【问题讨论】：

标签： javascript api django-rest-framework

【解决方案1】：

首先，我不知道你的 API 响应是什么样的，所以在这个解释中，我将使用（Rick-and-Morty APIs）。

https://rickandmortyapi.com/api/character

让我们创建一个从 API 获取数据的函数：

const loadData = () => {
  return fetch("https://rickandmortyapi.com/api/character")
    .then((response) => response.json())
    .catch((error) => {
      throw error;
    });
};

现在我们可以调用loadData 函数并构建主体：

const data = document.getElementById("data");

loadData().then((response) => {
  const results = response.results;
  let body = "";

  if (results && results.length > 0) {
    results.forEach((item) => {
      body += `ID: ${item.id} <br/>`;
    });
  }

  data.innerHTML = body;
});

因为results变量包含一个对象数组，我们可以直接使用.forEach方法。

loadData 返回Promise

工作示例：

https://codesandbox.io/s/affectionate-forest-utmr3

【讨论】：

谢谢兄弟我已经解决了，感谢您的评论