Treat return of the maps api getdetails() function in angular/Ionic

Question

I look for places close by with nearbySearch(), which returns an array of objects, from this return use the place_id to fetch the details getDetails(), that returns an object "place". Inside a loop when I will assign the value of place to this.detalhes[i] of that mistake.

Typeerror: _this.details is Undefined

Follows the code

declare var google;

@Injectable()

export class JsMapsProvider {

  map: any;

  places : Array<any>;

  detalhes: Array<any>;

  constructor(public geolocation : Geolocation) { }

  init(location, element){

    let latLng = new google.maps.LatLng(location.latitude, location.longitude);

    let opts = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    this.map = new google.maps.Map(element.nativeElement, opts);

    this.getFarmas(latLng).then( (results : Array<any>)=>{
      this.places = results;
      console.log(this.places);      

      for(let i = 0 ;i < results.length ; i++)
      {
        //loop para pegar valor bool e verificar se está aberta ou não e usar no marcador
        for(let i = 0 ;i < results.length ; i++){
          if(results[i].opening_hours == null){
            results[i].aberto = 'Não há informações sobre o horário de funcionamento';
          }else if(!results[i].opening_hours.open_now){
            results[i].aberto = 'Fechado neste momento';
          }else{
            results[i].aberto = 'Aberto neste momento';
          }
        }

        var service = new google.maps.places.PlacesService(this.map);
        var request = {
          placeId: results[i].place_id,
          //fields: ['formatted_phone_number']
        };

        service.getDetails(request,(place , status)=>{
              if (status === google.maps.places.PlacesServiceStatus.OK) {
              if(place.formatted_phone_number == null){
                  place.formatted_phone_number = 'Telefone não cadastrado';
                }
                this.detalhes[i] = place;


              }
            } 
          );

        this.createMarker(results[i]);

        console.log(this.detalhes);
      }
    },(status)=>console.log(status));

    this.addMarker(this.map);

  }

  getFarmas(latLng){
    var service = new google.maps.places.PlacesService(this.map);

    let request = {
        location : latLng,
        //radius : 2000 ,
        types: ['pharmacy'],
        rankBy: google.maps.places.RankBy.DISTANCE
    };
    return new Promise((resolve,reject)=>{
        service.nearbySearch(request,function(results,status){
              if(status === google.maps.places.PlacesServiceStatus.OK)
              {                 
                  resolve(results);
                  console.log(results);
              }else
              {
                  reject(status);
              }

        });

    });
  }

Answer 1

The variable this.detalhes nor initialized and so gives error when trying to assign some value. Initialize the variable like this:

detalhes: Array<any> = [];

Or

detalhes: any[] = [];

Also, you are assigning this.detalhes[i] = place; as if there were any values already defined in the index i. If there is, initialize at some point the variable this.detalhes with some values, otherwise follow @Marconi’s suggestion and use this.detalhes.push(places) to add items to your list detalhes.