如何使用javascript获取api来显示数据？答案

【问题标题】：How to fetch api with javascript to display data?如何使用javascript获取api来显示数据？
【发布时间】：2022-12-18 16:01:03
【问题描述】：

我正在尝试使用 javascript 构建一个 API，以从此 URL 获取数据以获取 json 数据： img, a, c 。但是下面的代码返回了一个错误

application.js:10 Uncaught (in promise) TypeError: data.forEach 不是函数

（为什么没有定义forEach方法）你能帮忙吗？谢谢

var results = document.getElementById("results");

fetch("https://www.mangaeden.com/api/list/0/")
  .then(response => response.json())
  .then((data) => {

    data.forEach((result) => {

      const movies = '<li><img src="' + result.im + '" alt=""><h3>' + result.a + '</h3><p>' + result.c + '</p></li>';
      results.insertAdjacentHTML("beforeend", movies);

    });
  });

{
  "a": "shoujo-apocalypse-adventure",
  "c": [
    "Adventure",
    "Drama",
    "Psychological",
    "Sci-fi",
    "Seinen",
    "Slice of Life",
    "Tragedy"
  ],
  "h": 156,
  "i": "5c410d31719a16035a4647cc",
  "im": "4a/4a1f2a595e0e84e62f6ceddf3946274478928ca99e8df86bc6511b6e.png",
  "ld": 1547822837.0,
  "s": 2,
  "t": "Shoujo Apocalypse Adventure"
},

【问题讨论】：

因为你的数据是对象，不是数组。
这是回应吗？当我检查时，它会回复类似：{ "end": -1, "manga": [ { "a": "joshiraku", "c": [ "Comedy", "Shounen", "Slice of Life" ], "h": 0, "i": "5bfdd0ff719a162b3c196677", "im": "4e/4e55aeda6ba2044eb2762124688b61e74f24880515e71827f1f1e2c4.png", "ld": 1543389646.0, "s": 2, "t": "Joshiraku" }, ]} }
@jonrsharpe 最后的 , 可能表示它是数组的一个元素。但是在那种情况下说它是“Json 文件：”并不完全正确。
@tevemadar 如果它是一个数组，你就不会得到那个错误
@MoshFeu 是的！这是响应。当我做了简单的获取但没有显示时。

标签： javascript api fetch

【解决方案1】：

响应不是数组 ([])，而是一个对象 ({})，对象没有方法 forEach。我猜你是想在条目上运行 forEach，在本例中是在 data.manga 下。

var results = document.getElementById("results");

fetch("https://www.mangaeden.com/api/list/0/", {
    mode: 'cors'
  })
  .then(response => response.json())
  .then((data) => {

    data.manga
      .filter(movie => movie.c.includes('Action') || movie.c.includes('Adventure'))
      .slice(0, 10).forEach((result) => {

      const movies = '<li><img src="https://cdn.mangaeden.com/mangasimg/' + result.im + '" alt=""><h3>' + result.a + '</h3><p>' + result.c + '</p></li>';
      results.insertAdjacentHTML("beforeend", movies);

    });
  });

&lt;ul id="results"&gt;&lt;/ul&gt;

https://jsbin.com/gecusi/edit?html,js

笔记：在示例中，我 slice 数组，因为有 ~6.7k 部电影而且我不想阻止浏览器。

【讨论】：

嗨莫什感谢您的回答！虽然图像没有显示，有什么办法可以显示吗？
另外， mode: 'cors' 是做什么的？
A. json 中的路径是相对的（例如不包括域）。如果您知道基本路径，则可以完成。
B. cros 表示允许将请求发送到不同的域 - developer.mozilla.org/en-US/docs/Web/API/Fetch_API/…。如果没有它，我不确定它如何为您工作。
嗨，Mosh，我明白你的意思，在这种情况下，你建议如何找到基本路径？