How to manipulate LatLng objects?

Question

I am running a request towards a database and gets (as shown with JSON.Stringify() in the console:

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 is a record with some properties and one property is an array of Lat/Lng. To get this record I have the following code:

 this.customerApi.getSites(this.currentUser.id)
.subscribe(response => {
  this.sites = response;
  console.log('sites : ' + JSON.stringify(this.sites));
});
  }

I am getting an Observable() that I show in the console.

I would like to get the Point property and push it to an array of arrays as it could exist many records sent back by the back-end. The goal is to have nested coordinates that could draw polygons on Google Map with Angular Google Map angular component

For this, I have declared:

rectangles: Array<Array<LatLngLiteral>> = [];

and under the "subscribe" do a:

.subscribe(response => {
  this.sites = response;
  this.rectangles.push(this.sites.points); 

rectangles is empty.

Any idea that could help me a lot please?

Thanks in advance for your help.

Answer 1

I see in your datastructure that sites is an array. So if you do this.sites.points it will be undefined.

What you want is: this.rectangles.push(this.sites.map(s => s.points))

The difference is you tried to access the property sites on an array. Arrays don't have that property, consequently it is undefined. Arrays are build in data structures with a defined set of functions and properties like length or map

For example:

const exampleObject = {propertyA: "value", propertyB: "another value" }

//access properties on object

//"value"
exampleObject.propertyA

//"another value"
exampleObject.propertyB

const exampleArray = ["one", "two", "three"]

//propertyA does not exists = undefined
exampleArray.propertyA

//lenght property exists on all arrays = 3
exampleArray.length

Arrays do have a function called map this means call a function on every element and return a new array. It is commonly used to transform data structures or to get a deeper nested element.

This is just shorthand:

this.sites.map(s => s.points)

Actually it means this:

const pointsArray = this.sites.map(s => {
       //s is a single element in sites array
       // s has property points which is an array
       return s.points
    })


// now we have an array of points, we can add it to rectangles

this.reactangles.push(pointsArray)

Hope it is more clear now.