I am currently in the process of subscribing to a service that needs access to the REST back-end using the specified object.
export class Country {
iso: String;
iso3: String;
name: String;
niceName: String;
numCode: number;
phoneCode: number;
constructor(values: Country = {}) {
Object.assign(this, values);
}
}
The method in this service is responsible for fetching data from the API, and it successfully retrieves data into the map() function.
public getCountries(): Observable<Country[]> {
return this.http.get(COUNTRY_URL).pipe(
map(response => {
const countries = response.json()._embedded.countries;
return countries.map((country) => { new Country(country) });
}),
catchError(this.handleError)
);
}
Below is the consumer subscribing to the service.
countries: Country[] = [];
constructor(private countryService: CountryService) {
countryService.getCountries()
.subscribe(countries => {
this.countries = countries;
});
}
However, the country variable seems to be an array of undefined objects.
Additional Information
I am utilizing Angular 6 alongside RXJS6 and have followed the migration guide here
This snippet represents a sample API response.
{
"_embedded" : {
"countries" : [ ... ]
},
"_links" : {
"first" : {
"href" : "http://localhost:8080/api/countries?page=0&size=20"
},
"self" : {
"href" : "http://localhost:8080/api/countries{?page,size,sort}",
"templated" : true
},
"next" : {
"href" : "http://localhost:8080/api/countries?page=1&size=20"
},
"last" : {
"href" : "http://localhost:8080/api/countries?page=11&size=20"
},
"profile" : {
"href" : "http://localhost:8080/api/profile/countries"
},
"search" : {
"href" : "http://localhost:8080/api/countries/search"
}
},
"page" : {
"size" : 20,
"totalElements" : 239,
"totalPages" : 12,
"number" : 0
}
}
If there are any issues with my code, can someone kindly point them out? Any assistance would be greatly appreciated.