title: Getting .json is not a function on Promise.all w/fetch
body: <p>Oh once again I have those Promise.all blues:( I have a function that makes an array of fetch call's from provided urls and then we want to retrieve data via a Promise.all and return array of reponses or better yet just return the promise to calling function. . The problem is this results in error w/console showing:</p>
  <pre><code>There was problem retrieving data. TypeError: r.json is not a function
  </code></pre>
  <p>The code for the function is :</p>
  <pre><code> const getLeagueLeaders = (url, params) =&gt; {
    // First let's create the array of url's
    let queryURLs = [];
  
    params.forEach((param) =&gt; {
      queryURLs.push(
        fetch(`${url}${new URLSearchParams(param)}`, {
          method: &quot;get&quot;,
          headers: {
            Authorization:
              &quot;Basic ==&quot;,
          },
        }).then((res) =&gt; res.json())
      );
    });
  
    return (
      Promise.all(queryURLs)
        // map array of responses into an array of response.json() to read their content
        .then((responses) =&gt; responses.map((r) =&gt; r.json()))
        .catch((err) =&gt; {
          console.error(&quot;There was problem retrieving data.&quot;, err);
        })
    );
  };
      
      module.exports = getLeagueLeaders;
  </code></pre>
  <p>And in Vue component</p>
  <pre><code> mounted: async function () {
          const leagueLeadersResponseArray = await getLeagueLeaders(
            this.fetchBaseUrl,
            this.params
          );
  this.qbLeaders =
        leagueLeadersResponseArray[0].cumulativeplayerstats.playerstatsentry;
  </code></pre>
  <p>Obviously leagueLeadersResponseArray is undefined. I researched .json() and dont see how I am using it incorrectly. At first i thought I needed a Promise.all wrapper for the responses.map((r) =&gt; r.json()) but that did no good either. I looked at this <a href="https://stackoverflow.com/questions/60839014/data-json-is-not-a-function-react">link</a> but I am not using fetch as he is. Any guidance much appreciated....</p>
  <p>Updated working code for anybody else:</p>
  <pre><code>// ---------- src/js/modules/ ------------------ //
  
  /* jshint ignore:start */
  // Make function to retrieve League Leaders in a Category
  
  const getLeagueLeaders = (url, params) =&gt; {
    // First let's create the array of url's
    let queryURLs = [];
  
    params.forEach((param) =&gt; {
      queryURLs.push(
        fetch(`${url}${new URLSearchParams(param)}`, {
          method: &quot;get&quot;,
          headers: {
            Authorization:
              &quot;Basic ==&quot;,
          },
        }).then((res) =&gt; res.json())
      );
    });
  
    return Promise.all(queryURLs).catch((err) =&gt; {
      console.error(&quot;There was problem retrieving data.&quot;, err);
    });
  };
  
  module.exports = getLeagueLeaders;
  </code></pre>