How to extract content coming from an Observable and store it in an Array based on a key?

Question

I have the following content:

Location:
lat: 43.252967
lng: 5.379856
__proto__: Object
customerId: "5cd430c65304a21b9464a21a"
id: "5d5a99c62a245117794f1276"
siteId: "5d0ce7c4a06b07213a87a758"
__proto__: Object
1:
Location: {lat: 43.249466, lng: 5.392988}
customerId: "5cd430c65304a21b9464a21a"
id: "5d5ab9472a245117794f1277"
siteId: "5d0ce7c4a06b07213a87a753"
__proto__: Object
2:
Location: {lat: 43.245153, lng: 5.395048}
customerId: "5cd430c65304a21b9464a21a"
id: "5d5ab95d2a245117794f1278"
siteId: "5d0ce7c4a06b07213a87a753"
__proto__: Object

I want to extract lat and lng from this content and store them in the same array and stored this array in an array of arrays. This will define an array per site, containing only lat and lng. One array per site stored in an array containing all the arrays per site.

For this, I have the following code:

   this.customerApi.getPoints(this.currentUser.id)
      .subscribe(response => {
        this.sites = response;
        const ok = this.sites.map(s => s.Location);

        ok.forEach((points) => this.pointsArray.push(points));
        console.log(this.pointsArray);

Unfortunately this gives only one tab and not as much as I have siteIDs like this:

0: {lat: 43.252967, lng: 5.379856}
1: {lat: 43.249466, lng: 5.392988}
2: {lat: 43.245153, lng: 5.395048}
3: {lat: 43.239838, lng: 5.383804}
4: {lat: 44.811343, lng: -0.629233}
5: {lat: 44.807202, lng: -0.614642}
6: {lat: 44.796971, lng: -0.620307}
7: {lat: 44.795266, lng: -0.626272}
length: 8

I would like to have an array of 2 Arrays: 1st:

    0: {lat: 43.252967, lng: 5.379856}
    1: {lat: 43.249466, lng: 5.392988}
    2: {lat: 43.245153, lng: 5.395048}
    3: {lat: 43.239838, lng: 5.383804}

2nd:

1: {lat: 44.811343, lng: -0.629233}
2: {lat: 44.807202, lng: -0.614642}
3: {lat: 44.796971, lng: -0.620307}
4: {lat: 44.795266, lng: -0.626272}

Any help would be really precious here.

I thank you in advance for your help,

If you take a console log of the response how many sites are returned? Is this the number you were expecting. On the surface the rest of the code looks like it should be fine — chrismclarke, Aug 26 '19 at 13:33
It can be unlimited and the Observable return is not sorted. — Philippe Corrèges, Aug 26 '19 at 13:36
understood, but with the current data you are testing with... — chrismclarke, Aug 26 '19 at 13:37
Great, that helps a lot. And just to clarify, can you also add what you expect/want the output to look like? — chrismclarke, Aug 26 '19 at 13:42

chrismclarke · Accepted Answer · 2019-08-26T14:04:44.647

Assuming that all of your data is stored in a single list, it sounds like you want to somehow group by site before returning. Methods to do this are discussed here: Most efficient method to groupby on an array of objects

Once grouped it will be in the format

{
  "site 1": [
    {
      "Location": {
        "lat": 43.252967,
        "lng": 5.379856
      },
      "siteId": "site 1"
    },
    {
      "Location": {
        "lat": 43.252967,
        "lng": 5.379856
      },
      "siteId": "site 1"
    },
    {
      "Location": {
        "lat": 43.252967,
        "lng": 5.379856
      },
      "siteId": "site 1"
    },
    {
      "Location": {
        "lat": 43.252967,
        "lng": 5.379856
      },
      "siteId": "site 1"
    }
  ],
  "site 2": [
    {
      "Location": {
        "lat": 43.252967,
        "lng": 5.379856
      },
      "siteId": "site 2"
    },
    {
      "Location": {
        "lat": 43.252967,
        "lng": 5.379856
      },
      "siteId": "site 2"
    },
    {
      "Location": {
        "lat": 43.252967,
        "lng": 5.379856
      },
      "siteId": "site 2"
    },
    {
      "Location": {
        "lat": 43.252967,
        "lng": 5.379856
      },
      "siteId": "site 2"
    }
  ]
}

So you will have to do some added manipulation after to extract back into 2 arrays

  getPoints(){ 
    this.customerApi.getPoints(this.currentUser.id)
      .subscribe(response => {
        this.sites = this._groupBy(response,'siteId');
        const siteArray = Object.keys(this.sites).map(key=>this.sites[key])
        this.pointsArray = siteArray.map(siteMeta=>siteMeta.map(site=>site.Location))
        console.log(this.pointsArray)
      })

  }
  _groupBy(xs,key){
    return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
  }

Here is a working stackBlitz: https://stackblitz.com/edit/angular-ad17xq

ok but my problem is to extract and build an array of arrays. We assume here data is sorted by siteId. I have to check as I think the return will always be sorted. This will be part maybe of another question. — Philippe Corrèges, Aug 26 '19 at 14:03
so when you say the data is sorted by siteId, when you get the response from your database do you get one array back (containing all the data) or two arrays back (already split?)? If it is the first case the above code should work — chrismclarke, Aug 26 '19 at 14:06
I have a list. My problem is to build the array of arrays. Those arrays are: one array per site id. — Philippe Corrèges, Aug 26 '19 at 14:12
Does the above code do what you want it to? If not, please explain further — chrismclarke, Aug 26 '19 at 14:15
I looked at stackblitz. Seems to answer perfectly. Wow ... I ll let you know as soon as I have copied/pasted the code. — Philippe Corrèges, Aug 26 '19 at 14:16
glad to hear it! I'd definitely recommend spending a few extra moments to ensure it makes sense to you also (hopefully the console logs should help with that). The groupBy function may seem a bit more abstract, but is explained well in the comments of the thread linked in the answer — chrismclarke, Aug 26 '19 at 14:21
Thanks a lot. Once brexit is forbidden, I ll come back to work in London :-) — Philippe Corrèges, Aug 26 '19 at 14:37

How to extract content coming from an Observable and store it in an Array based on a key?

1 Answers1