When I run a request to retrieve data from a database, the response displayed in the console using JSON.Stringify() is as follows:
sites : [{"siteName":"Site de Marseille",
"siteAdress1":"rue du string",
"siteAddress2":"string",
"siteCodPost":"13010","siteTown":"Marseille",
"id":"5d0ce7c4a06b07213a87a753",
"companyId":"5cd430745304a21b9464a219",
"customerId":"5cd430c65304a21b9464a21a",
"points":
[
{"lat":44.841225,"lng":-0.580036},
{"lat":44.842236,"lng":-0.64696},
{"lat":44.805615,"lng":-0.63084}]}
]
This data includes various properties, one of which is an array of latitude and longitude coordinates. To access this data, I am using the following code:
this.customerApi.getSites(this.currentUser.id)
.subscribe(response => {
this.sites = response;
console.log('sites : ' + JSON.stringify(this.sites));
});
}
The subscription returns an Observable that I can view in the console.
My objective is to extract the "points" property and store it in an array of arrays since multiple records may be returned by the backend system. This nested structure would allow me to plot polygons on Google Maps using the Angular Google Map component.
To achieve this, I have initialized the following:
rectangles: Array<Array<LatLngLiteral>> = [];
And within the subscribe function, I do the following:
.subscribe(response => {
this.sites = response;
this.rectangles.push(this.sites.points);
However, the rectangles array remains empty.
If you have any suggestions or ideas that could assist me, please share them with me.
Thank you for your assistance.