How to fetch api with javascript to display data?

Question

I am trying to build an API with JavaScript to fetch data from this URL for JSON data: img, a, c , but below codes threw back an error of

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

(why is the forEach method not defined) can you help?

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"
},

Is this the response? When I checked, it responses with something like: { "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" }, ]} } — Mosh Feu
– Mosh Feu, Commented May 26, 2019 at 9:40
@jonrsharpe the , at the very end may indicate it is an element of an array. However in that case saying it is "the Json file:" is not entirely correct. — tevemadar
– tevemadar, Commented May 26, 2019 at 9:43
@tevemadar and if it was an array, you wouldn't get that error — jonrsharpe
– jonrsharpe, Commented May 26, 2019 at 9:45
@MoshFeu yes! this is the response.when i did simple fetch but without displaying. — developing
– developing, Commented May 26, 2019 at 9:48

Mosh Feu · Accepted Answer · 2019-05-27 16:44:19Z

2

The response is not an array ([]) but an object ({}) and object has no method forEach. I guess you meant to run the forEach on the entries, which in this case is under 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);

    });
  });

<ul id="results"></ul>

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

Note: In the example I slice the array because there are ~6.7k movies and I don't want to block the browser.

edited May 27, 2019 at 16:44

answered May 26, 2019 at 14:55

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

developing Over a year ago

hi mosh thanks for answering! although the images aren't showing , is there any way to show it?

developing Over a year ago

also, what does mode: 'cors' do?

Mosh Feu Over a year ago

A. The path in the json is relative (not includes the domain, for example). If you know the base path, it can be done.

Mosh Feu Over a year ago

B. cros means that the request allowed to be sent to a different domain - developer.mozilla.org/en-US/docs/Web/API/Fetch_API/…. I'm not sure how it works for you without that.

developing Over a year ago

hi Mosh, i understand what you mean, in this case, how'd you suggest to find the base path?

|

Collectives™ on Stack Overflow

How to fetch api with javascript to display data?

1 Answer 1

19 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

19 Comments

Your Answer

Sign up or log in

Post as a guest

Related