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
CodePudding user response：
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
CodePudding user response：
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/app/app.component.html