2017-06-20 105 views
1

我有一个对象:排序阵列状物体角

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

注意

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

,它的数据结构如下:

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

在对象[ID] .style.price.baseMSRP包含我想要排序的价格价格低 - >高

我创建了一个功能:

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

我试着这样做:

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

但排序没有内置的对象。

我有一个模板:

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

这使得下面的输出:

Sort by Price

我想模板,通过价格值从object[key].style.price.baseMSRP

+0

在使用ui或管道显示对象之前,您应该将对象转换为数组。 – toskv

+0

@toskv,假设我使用Raulucco方法来转换数组..没问题;你可以创建这个管道,以便我可以看到一个例子吗? (我想开始使用它们) – Moshe

+0

我添加了答案,如果您需要更多关于如何配置它们的信息,我可以添加它们。以防你不使用命令行或者你想要更多的信息。 – toskv

回答

1

表示出来此对象的创建一个数组并分类它看起来像这样的管道。

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

} 

如果您使用的角度CLI您可以创建一个使用ng generate pipe <name>很会照顾它也被添加在所有适当的地方,因此正确连接。

您可以在角度2文档here中阅读更多关于管道的信息。

+0

我喜欢你的评价 – Moshe

0

Array s到排序可以确保排序顺序。

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