Sorted Observable based on another Observable - Angular

Issue

I have an Observable anmed "History" in which there is an array of elements. It is represented by this json file : (As you can see there are 3 types of entries just the id changes...)

{
  "history": [
    {
      "id": 2,
      "SNS": "85-05-14 Flange B Bracket Relocation",
      "title": "Mangekyu Conversion - Miscellaneous",
      "DMC": "DMC-PW800-A-72-31-28-00A-910A-B",
      "date": "2022-07-02T21:26:41.098Z",
      "showTrash": false,
      "points": 0
    },
    {
      "id": 3,
      "SNS": "74-10-02 Fuel Metering Unit (FMU)",
      "title": "Chidori Fuel Metering Unit (FMU) - Removal",
      "DMC": "DMC-PW800-A-75-10-17-00A-520A-A",
      "date": "2022-07-02T21:26:42.826Z",
      "showTrash": false,
      "points": 0
    },
    {
      "id": 144280205.0483089,
      "SNS": "72-00-10 General",
      "title": "Rasengan Low Pressure Compressor",
      "DMC": "DMC-PW800-A-72-31-25-00A-910A-8",
      "date": "2022-07-02T21:28:32.971Z",
      "showTrash": false,
      "points": 0
    },
    {
      "id": 653540875.8536806,
      "SNS": "85-05-14 Flange B Bracket Relocation",
      "title": "Mangekyu Conversion - Miscellaneous",
      "DMC": "DMC-PW800-A-72-31-28-00A-910A-B",
      "date": "2022-07-02T21:28:34.530Z",
      "showTrash": false,
      "points": 0
    },
    {
      "id": 874119204.715397,
      "SNS": "74-10-02 Fuel Metering Unit (FMU)",
      "title": "Chidori Fuel Metering Unit (FMU) - Removal",
      "DMC": "DMC-PW800-A-75-10-17-00A-520A-A",
      "date": "2022-07-02T21:28:38.116Z",
      "showTrash": false,
      "points": 0
    },
    {
      "id": 221440940.97637305,
      "SNS": "74-10-02 Fuel Metering Unit (FMU)",
      "title": "Chidori Fuel Metering Unit (FMU) - Removal",
      "DMC": "DMC-PW800-A-75-10-17-00A-520A-A",
      "date": "2022-07-02T21:28:38.679Z",
      "showTrash": false,
      "points": 0
    }
  ]
}

I would like to create another Observable in which I store each type of entry sorted by the number of times they are present in the json file. With the json file that is above, I should get an Observable with :

1/"SNS": "74-10-02 Fuel Metering Unit (FMU)", "title": "Chidori Fuel Metering Unit (FMU) - Removal", "DMC": "DMC-PW800-A-75-10-17-00A-520A-A", "date": "2022-07-02T21:28:38.679Z", "showTrash": false, "points": 0

2/"SNS": "85-05-14 Flange B Bracket Relocation", "title": "Mangekyu Conversion - Miscellaneous", "DMC": "DMC-PW800-A-72-31-28-00A-910A-B", "date": "2022-07-02T21:28:34.530Z", "showTrash": false, "points": 0

3/"SNS": "72-00-10 General", "title": "Rasengan Low Pressure Compressor", "DMC": "DMC-PW800-A-72-31-25-00A-910A-8", "date": "2022-07-02T21:28:32.971Z", "showTrash": false, "points": 0

How do I go through my "History" Observable and create a sorted "Content" Observable based on the number of times there is each entry in the "History" Observable

Solution

Assuming two entries are the same based on the SNS.

First you need to count all the entries, then you can place them in sorted order.

Here is an implementation where original$ is the original observable.

  new$ = original$.pipe(map((res: any) => this.sort(res.history)));

  sort(history: any[]): any[] {
    const result = [];
    const counts: { [key: string]: number } = {};
    for (const i of history) {
      if (counts[i.SNS] === undefined) {
        counts[i.SNS] = 0;
        result.push(this.stripId(i));
      }
      counts[i.SNS]++;
    }
    return result.sort((a, b) => counts[b.SNS] - counts[a.SNS]);
  }

  stripId(object: any) {
    const result = { ...object };
    delete result.id;
    return result;
  }

I use any because I'm too lazy to create types for this example, but you should use actual types.

Stackblitz: https://stackblitz.com/edit/angular-ivy-rqzyx8?file=src/app/app.component.ts

Answered By - Chris Hamilton