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

【问题标题】：How to fetch api with javascript to display data?如何使用 javascript 获取 api 以显示数据？
【发布时间】：2019-05-28 00:44:19
【问题描述】：

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

application.js:10 Uncaught (in promise) TypeError: data.forEach is not a function

（为什么没有定义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，我明白你的意思，在这种情况下，你建议如何找到基本路径？