Sorted Observable based on another Observable - Angular

Question

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...)

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.

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

Answer 1

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

Answer 2

We could make an function groupBy https://stackoverflow.com/a/21776652/15439733 to group our items by property and use sort to sort arrays by length. https://stackoverflow.com/a/11208371/15439733

html:

<div *ngFor="let group of groupedData">
  <br />
  <br />
  {{ group.length }} items
  <div *ngFor="let item of group">
    <br />
    id: {{ item.id }} SNS:{{ item.SNS }} DMC:{{ item.DMC }} date:{{
      item.date | date: 'short'
    }}
    showTrash: {{ item.showTrash }} points: {{ item.points }}
  </div>
</div>

  groupedData: any;

  ngOnInit(): void {
    of(this.history).subscribe((data) => {
      this.groupedData = groupBy(data, 'title').sort((a, b) => {
        return b.length - a.length;
      });
      console.log(this.groupedData);
    });
  }

  ngOnDestroy() {}
}

export function groupBy(collection, property) {
  let i = 0,
    val,
    index,
    values = [],
    result = [];
  for (; i < collection.length; i++) {
    val = collection[i][property];
    index = values.indexOf(val);
    if (index > -1) result[index].push(collection[i]);
    else {
      values.push(val);
      result.push([collection[i]]);
    }
  }
  return result;
}

0: (3) [{…}, {…}, {…}]
1: (2) [{…}, {…}]
2: (1) [{…}]

json = [
    [
        {
            "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": 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
        }
    ],
    [
        {
            "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": 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": 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
        }
    ]
]

for (const group of json) {
console.log(group)
}

Working example: https://stackblitz.com/edit/angular-ivy-vtx8mk?file=src%2Fapp%2Fapp.component.html