Sorting Array-like Object Angular

Question

I have an object:

{ "200737212": { "style": { "make": { "id": 200001510, "name": "Jeep", "niceName": "jeep" }, "model": { "id": "Jeep_Cherokee", "name": "Cherokee", "niceName": "cherokee" }, "price": { "deliveryCharges": 995, "baseInvoice": 23360, "baseMSRP": 23495 }, "id": 200737212, "name": "Sport 4dr SUV (2.4L 4cyl 9A)", "trim": "Sport" }, "config": { "id": 200737212, "includedItems": [], "furtherRemovals": [] }, "lease": { "leaseStart": 200, "onePayStart": 150 } }, "200737213": { "style": { "make": { "id": 200001510, "name": "Jeep", "niceName": "jeep" }, "model": { "id": "Jeep_Cherokee", "name": "Cherokee", "niceName": "cherokee" }, "price": { "deliveryCharges": 995, "baseInvoice": 24083, "baseMSRP": 24290 }, "id": 200737213, "name": "Altitude 4dr SUV (2.4L 4cyl 9A)", "trim": "Altitude" }, "config": { "id": 200737213, "includedItems": [], "furtherRemovals": [] }, "lease": { "leaseStart": 300, "onePayStart": 250 } }, "200737214": { "style": { "make": { "id": 200001510, "name": "Jeep", "niceName": "jeep" }, "model": { "id": "Jeep_Cherokee", "name": "Cherokee", "niceName": "cherokee" }, "price": { "deliveryCharges": 995, "baseInvoice": 24818, "baseMSRP": 25295 }, "id": 200737214, "name": "Latitude 4dr SUV (2.4L 4cyl 9A)", "trim": "Latitude" }, "config": { "id": 200737214, "includedItems": [], "furtherRemovals": [] }, "lease": { "leaseStart": 400, "onePayStart": 350 } }, "200737215": { "style": { "make": { "id": 200001510, "name": "Jeep", "niceName": "jeep" }, "model": { "id": "Jeep_Cherokee", "name": "Cherokee", "niceName": "cherokee" }, "price": { "deliveryCharges": 995, "baseInvoice": 28484, "baseMSRP": 29195 }, "id": 200737215, "name": "Limited 4dr SUV (2.4L 4cyl 9A)", "trim": "Limited" }, "config": { "id": 200737215, "includedItems": [], "furtherRemovals": [] }, "lease": { "leaseStart": null, "onePayStart": null } } } 

Note that

Object.keys(Object) = [200737212, 200737213, 200737214, 200737215] 

and it's data structure is as follows:

{ { style: {}, config: {}, lease: {} }, { style: {}, config: {}, lease: {} }, { style: {}, config: {}, lease: {} } } 

In Object[id].style.price.baseMSRP contains the price value in which I want to sort low --> high

I created a function:

 function sortByPrice(a: any, b: any) { console.log(a, b); const priceA = a.style.price.baseMSRP; const priceB = b.style.price.baseMSRP; if (priceA < priceB) { return -1; } if (priceA > priceB) { return 1; } return 0; } 

I tried to do this:

this.object = this.object.sort(sortByPrice); 

But sorting is not built-in to objects.

I have a template:

<ng-container *ngFor="let id of carIDs"> <md-card *ngIf="activeYear === cars[id]['style'].year.year"> <md-card-content fxFlex> <ul class="fa-ul"> <li><i class="fa-li fa fa-thermometer-2"></i>{{cars[id]['style'].engine.size}}L {{ cars[id]['style'].engine.cylinder }} Cylinder </li> </ul> </md-card-content> <md-card-subtitle>Starting MSRP: {{cars[id]['style']?.price.baseMSRP }} </md-card-subtitle> <md-card-subtitle *ngIf="cars[id]['lease']?.leaseStart !== null">Starting Monthly Lease: {{ cars[id]['lease']?.leaseStart }} </md-card-subtitle> <md-card-subtitle *ngIf="cars[id]['lease']?.onePayStart !== null">Starting One Pay Lease: {{cars[id]['lease']?.onePayStart }} </md-card-subtitle> </md-card> </ng-container> 

Which renders the following output:

I would like the template to sort by price value from object[key].style.price.baseMSRP

Answer 1

A pipe that creates an array out of this object and sorts it would look like this.

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'sortObject' }) export class SortObjectPipe implements PipeTransform { transform(value: any, args?: any): any { return Object .keys(value) .map(key => ({ key, value: value[key] })) .sort((a, b) => a.key.localeCompare(b.key)); } } 

If you use the angular cli you can create one by using ng generate pipe <name> it will take care it is also added in all the proper places so it wired correctly.

You can read more about pipes in the angular 2 documentation here.

Answer 2

only Arrays can ensure sorting order.

function sort(data) { return Object .keys(data) .map(key => ({key, value: data[key]})) .sort((a, b) => a.key.localeCompare(b.key) /* your way */) ; } var data = { "200737212": { "style": { "make": { "id": 200001510, "name": "Jeep", "niceName": "jeep" }, "model": { "id": "Jeep_Cherokee", "name": "Cherokee", "niceName": "cherokee" }, "price": { "deliveryCharges": 995, "baseInvoice": 23360, "baseMSRP": 23495 }, "id": 200737212, "name": "Sport 4dr SUV (2.4L 4cyl 9A)", "trim": "Sport" }, "config": { "id": 200737212, "includedItems": [], "furtherRemovals": [] }, "lease": { "leaseStart": 200, "onePayStart": 150 } }, "200737213": { "style": { "make": { "id": 200001510, "name": "Jeep", "niceName": "jeep" }, "model": { "id": "Jeep_Cherokee", "name": "Cherokee", "niceName": "cherokee" }, "price": { "deliveryCharges": 995, "baseInvoice": 24083, "baseMSRP": 24290 }, "id": 200737213, "name": "Altitude 4dr SUV (2.4L 4cyl 9A)", "trim": "Altitude" }, "config": { "id": 200737213, "includedItems": [], "furtherRemovals": [] }, "lease": { "leaseStart": 300, "onePayStart": 250 } }, "200737214": { "style": { "make": { "id": 200001510, "name": "Jeep", "niceName": "jeep" }, "model": { "id": "Jeep_Cherokee", "name": "Cherokee", "niceName": "cherokee" }, "price": { "deliveryCharges": 995, "baseInvoice": 24818, "baseMSRP": 25295 }, "id": 200737214, "name": "Latitude 4dr SUV (2.4L 4cyl 9A)", "trim": "Latitude" }, "config": { "id": 200737214, "includedItems": [], "furtherRemovals": [] }, "lease": { "leaseStart": 400, "onePayStart": 350 } }, "200737215": { "style": { "make": { "id": 200001510, "name": "Jeep", "niceName": "jeep" }, "model": { "id": "Jeep_Cherokee", "name": "Cherokee", "niceName": "cherokee" }, "price": { "deliveryCharges": 995, "baseInvoice": 28484, "baseMSRP": 29195 }, "id": 200737215, "name": "Limited 4dr SUV (2.4L 4cyl 9A)", "trim": "Limited" }, "config": { "id": 200737215, "includedItems": [], "furtherRemovals": [] }, "lease": { "leaseStart": null, "onePayStart": null } } }; console.log(sort(data));