title: Make object accessible outside JavaScript fetch function
body: <p>My project to compare two cities weather
  my problem that I can't access the objects outside the fetch function call
  my object</p>
  <pre><code>submitBtn.addEventListener(&quot;click&quot;, function () {
    // getting user data
    resultArea.innerHTML = &quot;&quot;;
  
    loadingSec.style.display = &quot;block&quot;;
    const firstCityName = document.getElementById(&quot;firstCityName&quot;);
    const secondCityName = document.getElementById(&quot;secondCityName&quot;);
    // inilize arrays for strong city weather daya for 8 days
    const firstCitydata = new Array();
    let secondCitydata = [];
    // get request date and calulte 8 days bevore and store it in dates array
    const dates = req_dates();
    let currentReq = [new HisCityDayWeather(), new HisCityDayWeather()];
    //fetch each day wether data
    for (let i = 0; i &lt; dates.length; i++) {
      // first city fetch function call
  
      getData(firstCityName.value, dates[i]).then((data) =&gt; {
        currentReq[0].name = data.location.name;
        currentReq[0].day.push(data.forecast.forecastday[0].day);
        currentReq[0].date.push(data.forecast.forecastday[0].date);
      });
  
      getData(secondCityName.value, dates[i]).then((data) =&gt; {
        currentReq[1].name = data.location.name;
        currentReq[1].day.push(data.forecast.forecastday[0].day);
        currentReq[1].date.push(data.forecast.forecastday[0].date);
        stor_in_array(currentReq);
      });
    }
    function stor_in_array(citydata) {
      console.log(
        `store function call first ctiy length: ${citydata[0].day.length} second ctiy length: ${citydata[1].day.length}`
      );
  
      if (citydata[1].day.length === 8 &amp;&amp; citydata[0].day.length === 8) {
        console.log(`call complte`);
  
        loadingSec.style.display = &quot;none&quot;;
  
        build_3Row_table(dates, citydata[0], citydata[1]);
      }
    }
  });
  </code></pre>
  <p>This the only way my code kind of work but I have to call the function &quot;stor_in_array&quot; 8 times
  if the first fetch call didn't finish before the second one the the condition inside &quot;stor_in_array&quot; doesn't get passed
  If I tried to call the function pillow the for loop I can't access the arraay
  the fetch function</p>
  <pre><code>async function getData(cityName, date) {
    try {
      let response = await fetch(
        `https://api.weatherapi.com/v1/history.json?key=${wKey}&amp;q=${cityName}&amp;dt=${date}`
      );
      let data = await response.json();
      if (response.ok) {
        return data;
      } else {
        return data[&quot;error&quot;][&quot;code&quot;];
      }
    } catch (err) {
      console.log(err);
    }
  }
  </code></pre>
  <p>github repo: <a href="https://github.com/mohmed98/compare_cities" rel="nofollow noreferrer">here</a>
  project on netifly: <a href="https://compareweather.netlify.app/" rel="nofollow noreferrer">here</a> when trying check the network and press compare two times the second always work if you enter the names right
  note: I know there a lot of work should be done I Validation I am still working on</p>