Fetch multiple URLs for data

[RyanReese]

Here’s a short summary of my problem and then I can get more specific with code. I’m not sure about my options here.

I have a URL. Here is an example: https://www.test.io/asdf/fdsa/123456?filter=123456,234567,345678
The number of filters can vary. I need to create URLs for each of the filters, like so:
https://www.test.io/asdf/fdsa/123456?filter=123456
https://www.test.io/asdf/fdsa/123456?filter=234567
https://www.test.io/asdf/fdsa/123456?filter=345678

Each filter number has a specific piece of data inside of it: what source it’s coming from. To make this simple, let’s say they are colors . E.g. 123456. Each URL has JSON in it and ultimately, the goal is to combine URLs depending on what color each filter number is associated with. So let’s say that the first and last numbers are blue and the middle one is red. The final output would be
https://www.test.io/asdf/fdsa/123456?filter=123456,345678
https://www.test.io/asdf/fdsa/123456?filter=234567

In my head, the way to do this is to basically

• Take the initial URL, and split the URL. So if url in my example is the example URL in the beginning of my example, I have this working like so (output is an array of the 3 numbers)

url.split("?filter=").pop().split(",")

Then do a promise/fetch to parse the JSON and see which URL belongs in which category.

What made me make this topic, is that the full process is a bit convoluted, if I do this. The way it’s set up right now is that I basically

• Get the individual numbers
• Call a function which would then do the Promise like described above (not yet implemented/working)
• Return the results (the multiple URLs)
• Promise again to parse each individual URL and parse the JSON for other data and send that off to a callback inside of the then part of the Promise (this part is “working”, but works differently than I need right now, if that makes sense).

Is this the best way to approach this? Seems like a lot of fetching.

createURLsFromFilters(endpoint) {
    console.log("feedsids===");
    console.log(endpoint);
    console.log("2===");
    console.log(endpoint.split(","));
    var filters = Object.entries(this.filters);
    console.log("filters===");
    console.log(filters);
    console.log("test====");
    console.log(filters.map(filter => endpoint.split("?")[0] + "?filter=" + filter[0] + "&per=" + filter[1] + "&page=" + this.options.feed.page));
        // NEED PROMISE FUNCTION???
    return filters.map(filter => endpoint.split("?")[0] + "?filter=" + filter[0] + "&per=" + filter[1] + "&page=" + this.options.feed.page);
  }

  requestPostData(endpoint, feedOptions, callback) {
    console.log(endpoint.split("?filter=").pop().split(","));
    this.urls = this.createURLsFromFilters(endpoint.split("?")[0]);
    console.log("urls===");
    console.log(this.urls);
    Promise.all(this.urls.map(url =>
      fetch(url).then(resp => resp.json())
    )).then(values => {
      console.log("values===");
      console.log(values);
      callback(values);
    });
  }

Basically, requestPostData is called with the full URL. Inside of the createURLsFromFilters is where I think I need that Promise to parse the JSON and see which “color” it’s a part of.