Javascript Fetch and Map not working correctly

Question

I'm trying to fetch a multiple page api and place the json within an array. I've set it up so it does the required number of fetches and is setting up the correct number of promises. I am getting 50+ different responses. However, when I try to map each of those responses, it only pulls the first set of data and pushes that repetitively to the array. What am I not doing correctly?

var data;
    fetch(URL_ARTISTS3,{
        method:'GET'
    })
    .then(response => response.json())
    .then(json => {
        data =json;
        const apiPromises = [];
        var pagesRequired = Math.ceil(json.setlists["@total"] / json.setlists["@itemsPerPage"]);

        for (let i=pagesRequired; i>0;i--) {
            var fetchurl = URL_ARTISTS3 + '?page = ' + i;
            apiPromises.push(fetch(fetchurl, {
              method: "GET",
              body: json
            }));
        }

        Promise.all(apiPromises)
        .then(responses => {
            var processedResponses = [];
            responses.map(response => response.json()
                .then(json => {
           /****THIS LINE ADDS THE SAME JSON RESPONSE MULTIPLE TIMES*****/
                    processedResponses.push(json.setlists.setlist);
                })
             )   
            console.log('processedResponses: ', processedResponses)     

        });

Felix Kling · Accepted Answer · 2017-09-14 17:14:06Z

1

I'm not sure it solves the problem, but one issue is that you are logging processedResponses before the promises are resolved.

You can simplify your code a lot by moving the response.json() call:

apiPromises.push(
  fetch(fetchurl, {method: "GET", body: json})
    .then(response => response.json())
    .then(json => json.setlists.setlist);
);

// ...

Promise.all(apiPromises).then(processedResponses => console.log(processedResponses));

answered Sep 14, 2017 at 17:14

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

6 Comments

homersheineken Over a year ago

Thx for the reply. I tried this and it did not solve the issue of the same json being pushed multiple times.

Felix Kling Over a year ago

In that case every call either returns the same data or json.setlists.setlist is the same value in every response. It's impossible for the example that I provided to process a single API call multiple times.

homersheineken Over a year ago

json.setlists.setlist is indeed the same in every response. However every response call is for a different url: url : "cors-anywhere.herokuapp.com/https://api.setlist.fm/rest/0.1/…" And: url : "cors-anywhere.herokuapp.com/https://api.setlist.fm/rest/0.1/…"

Felix Kling Over a year ago

But json.setlists.setlist is the value you are pulling out, ignoring any other part of the response. So if that value is the same in every response you end up with an array that contains the same value n times. If you want to get the whole response, don't do .then(json => json.setlists.setlist);.

Felix Kling Over a year ago

I'm not sure what else to tell you. If you think the value of json.setlists.setlist should be different in every response, read the API documentation of service you are using and verify that you are sending the correct parameters. If json.setlists.setlist is expected to be the same but you want a different value, then don't access json.setlists.setlist but a different part of the response.

|

Collectives™ on Stack Overflow

Javascript Fetch and Map not working correctly

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related