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