Ionic5 Angular - transform http reponse to custom object-CodePudding

I'm completely new to Ionic and angular and I'm trying to load data from a REST api (for testing a local json file) and transform them to an object as the origin json structure is not really useful.

I tried this:

ngAfterViewInit(){
  var data = this.locationService.getLocalData()
  console.log(data);
}

location.service.ts:

getLocalData() {
let url = "/assets/data/locallocations.json";
 this.http.get<any[]>(url).subscribe(result => {
  var locations: Array<Location> = [];
      result.forEach(element => {
        try {
          var location: Location = new Location;
          location.id = element.station["id"];
          location.name = element.station["name"];
          location.number = element.station["number"];
          location.longitude = element.station["geocoordinate"]["longitude"];
          location.latitude = element.station["geocoordinate"]["latitude"];
          locations.push(location);
          
        } catch(error){
        }
      })
      console.log(locations)
    return locations

});
}

in the ngAfterViewInit() the console log is always undefinied (but not in the getLocalData()) - could somebody help me creating the getLocalData function in a way that I can also subscribe on it and wait for the result? Thanks.

CodePudding user response：

Welcome to the community! If Locations is an Array, you have to use array.push() on the results. But for a simple way to get results in your service, you may try like this:

   getLocalData(){
    let url = '/assets/data/locallocations.json';
    fetch(url).then(res => res.json())
    .then(result => {
        console.log('Locations: ', result);
    });
   }

CodePudding user response：

Thank you: I have found (another) solution for it:

ngAfterViewInit() {
   this.locationService.GetLocations().subscribe(result => {
      console.log(result)
   })
}

location.service.ts:

GetLocations(): Observable<any> {
return new Observable((observer: Observer<any>) => {
  let url = '/assets/data/locallocations.json';
  this.fetchLocalData().then(res => res.json())
    .then(res => {
      var data = this.processData(res).subscribe(res => {
        observer.next(res);
        observer.complete();
      })
    });
})
}

processData(data): Observable<any> {
return new Observable((observer: Observer<any>) => {

  var locations: Location[] = [];
  data.forEach(element => {
    try {
      var location: Location = new Location;
      location.id = element.station["id"];
      location.name = element.station["name"];
      location.number = element.station["number"];
      location.longitude = element.station["geocoordinate"]["longitude"];
      location.latitude = element.station["geocoordinate"]["latitude"];
      locations.push(location);
    } catch (error) {
    }
  })
  observer.next(locations);
  observer.complete();
})
}

fetchLocalData(){
   let url = '/assets/data/locallocations.json';
      return fetch(url);
}