2017-06-20 2 views
1

Ich habe ein Objekt:Sortierung Array-ähnlichen Objekt Angular

{ 
    "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 
    } 
    } 
} 

Beachten Sie, dass

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

und es ist Datenstruktur ist wie folgt:

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

In Object [id] .style.price.baseMSRP enthält den Preiswert, in dem ich niedrig sortieren möchte -> hoch

Ich habe eine Funktion:

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; 
    } 

Ich habe versucht, dies zu tun:

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

Aber Sortierung ist nicht eingebaut, um Objekte.

Ich habe eine Vorlage:

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

, die die folgende Ausgabe macht:

Sort by Price

Ich würde die Vorlage wie durch Preis-Wert sortieren von object[key].style.price.baseMSRP

+0

Sie sollten das Objekt in ein Array transformieren, bevor Sie es auf dem UI oder mit einer Pipe anzeigen. – toskv

+0

@toskv, vorausgesetzt, ich benutze den Ansatz von Raulucco, um das Array zu transformieren ... kein Problem; Kannst du diese Pipe erstellen, damit ich ein Beispiel sehen kann? (Ich möchte anfangen, sie zu benutzen) – Moshe

+0

Ich fügte die Antwort hinzu, wenn Sie mehr Info über, wie man sie benötige, kann ich sie hinzufügen. falls Sie die Befehlszeile nicht verwenden oder wenn Sie weitere Informationen wünschen. – toskv

Antwort

1

Ein Rohr, das aus diesem Objekt ein Array erstellt und sortiert es so aussehen würde.

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)); 
    } 

} 

Wenn Sie die Winkel cli verwenden, können Sie erstellen, indem Sie ng generate pipe <name> verwendet, wird es kümmern sie sich auch in all den richtigen Stellen hinzugefügt, damit es richtig verdrahtet.

Sie können mehr über Rohre in der eckigen 2 Dokumentation here lesen.

+0

Ich mag Ihre Apprach – Moshe

0

nur Array s kann Sortierreihenfolge sicherstellen.

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