react ajax : multiple nested fetch Get

Question

There is a function that first gets all zones in an environment and then when he found these zones for each zone it will do an api call for the borderpoints. All fetches get executed but the problem is that in the then for the first fetch if I try to write out the length of the zones or try to do a .foreach I get 0.

I know this is because it runs async and it is not yet loaded on the moment I do the console.log but I tought it should be. That's why we use the .then isn't it? to wait until the data has been loaded.

To be clear: I'm looking for a way to make zones.length give back the real length of the array of objects and be evaluated immediately instead of 0. I can't find out how:

Here is the code.

getZones(){
      var that = this;
  var zones = new Array();
  fetch('api/environment/zone/1').then(function(response){
    response.json().then(function(data){
      data.forEach(function(element){
        zones[element.zoneID] = element;
        zones[element.zoneID].points = [];
        fetch('api/zone/point/'+element.zoneID).then(function(response){
          response.json().then(function(data){
            data.forEach(function(element){
              zones[element.zoneID].points.push(element);  
            });
          }); //closing of data inner fetch.
          });
        });
      });
    }).then(function(response){
      console.log(zones); //this gives all zones
      console.log(zones.length); //this one gives 0
//the for each is never executed because it's still 0.
      zones.forEach(function(element){  
        console.log(element);
      });
    });
  }

Already a big thanks for the fast Reaction and help.

Answer 1

In the end I fixed it in a more beautiful way:

getZones2(){
      var that = this;
      var zones = [];
  fetch('api/environment/zone/1')
    .then(res => res.json())
    .then((json) => {
      Promise.all(
        json.map(
          element => fetch('api/zone/point/' + element.zoneID)
            .then(res => res.json())
        )
      ).then(datas => {
        json.forEach((element, i) => {
          zones[element.zoneID] = element
          zones[element.zoneID].points = datas[i]

        })
        console.log(zones);
        zones.forEach(function(response){
            that.makeZone(response.name,response.zoneID,response.points);
        })
      })
    });
}