Javascript 排序类数组对象_Javascript_Json_Angular_Sorting_Typescript

Javascript 排序类数组对象

javascript json angular sorting typescript

Javascript 排序类数组对象,javascript,json,angular,sorting,typescript,Javascript,Json,Angular,Sorting,Typescript,我有一个目标： { "200737212": { "style": { "make": { "id": 200001510, "name": "Jeep", "niceName": "jeep" }, "model": { "id": "Jeep_Cherokee", "name": "Cherokee", "niceName": "cherokee"

我有一个目标：

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

但排序不是内置于对象中的

我有一个模板：

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



{{cars[id]['style'].engine.size}L{{
汽车[id]['style'].engine.汽缸}}汽缸


正在启动MSRP:{{cars[id]['style']？.price.baseMSRP}
开始每月租赁：{{
汽车[id]['lease']？.leaseStart}
开始一次付费租赁：{{cars[id]['Lease']？.onePayStart}

这将呈现以下输出：

我希望模板能够根据

对象[key].style.price.baseMSRP中的价格值进行排序，只有数组
s可以确保排序顺序

函数排序（数据）{
返回对象
.钥匙（数据）
.map（key=>（{key，value:data[key]}））
.sort（（a，b）=>a.key.localeCompare（b.key）/*您的方式*/）
;
}
风险值数据={
"200737212": {
“风格”：{
“制造”：{
“id”：200001510，
“名称”：“吉普”，
“niceName”：“吉普”
},
“模型”：{
“id”：“吉普切诺基”，
“姓名”：“切诺基”，
“niceName”：“切诺基”
},
“价格”：{
“交付费用”：995，
“基本发票”：23360，
“baseMSRP”：23495
},
“id”：200737212，
“名称”：“Sport 4dr SUV（2.4L 4cyl 9A）”，
“修剪”：“运动”
},
“配置”：{
“id”：200737212，
“包括的项目”：[]，
“进一步清除”：[]
},
“租赁”：{
“租赁权”：200，
“onePayStart”：150
}
},
"200737213": {
“风格”：{
“制造”：{
“id”：200001510，
“名称”：“吉普”，
“niceName”：“吉普”
},
“模型”：{
“id”：“吉普切诺基”，
“姓名”：“切诺基”，
“niceName”：“切诺基”
},
“价格”：{
“交付费用”：995，
“基本发票”：24083，
“基本管理系统更新计划”：24290
},
“id”：200737213，
“名称”：“高度4dr SUV（2.4L 4cyl 9A）”，
“修剪”：“高度”
},
“配置”：{
“id”：200737213，
“包括的项目”：[]，
“进一步清除”：[]
},
“租赁”：{
“租赁开始”：300，
“onePayStart”：250
}
},
"200737214": {
“风格”：{
“制造”：{
“id”：200001510，
“名称”：“吉普”，
“niceName”：“吉普”
},
“模型”：{
“id”：“吉普切诺基”，
“姓名”：“切诺基”，
“niceName”：“切诺基”
},
“价格”：{
“交付费用”：995，
“基本发票”：24818，
“基本管理系统更新计划”：25295
},
“id”：200737214，
“名称”：“纬度4dr SUV（2.4L 4cyl 9A）”，
“修剪”：“纬度”
},
“配置”：{
“id”：200737214，
“包括的项目”：[]，
“进一步清除”：[]
},
“租赁”：{
“租赁开始”：400，
“onePayStart”：350
}
},
"200737215": {
“风格”：{
“制造”：{
“id”：200001510，
“名称”：“吉普”，
“niceName”：“吉普”
},
“模型”：{
“id”：“吉普切诺基”，
“姓名”：“切诺基”，
“niceName”：“切诺基”
},
“价格”：{
“交付费用”：995，
“基本发票”：28484，
“基本管理系统更新计划”：29195
},
“id”：200737215，
“名称”：“有限4dr SUV（2.4L 4cyl 9A）”，
“trim”：“Limited”
},
“配置”：{
“id”：200737215，
“包括的项目”：[]，
“进一步清除”：[]
},
“租赁”：{
“leaseStart”：空，
“onePayStart”：空
}
}
};
console.log（排序（数据））从该对象创建数组并对其进行排序的管道如下所示
从'@angular/core'导入{Pipe，PipeTransform}；
@烟斗({
名称：“sortObject”
})
导出类SortObjectPipe实现PipeTransform{
转换（值：any，args？：any）：any{
返回对象
.键（值）
.map（key=>（{key，value:value[key]}））
.sort（（a，b）=>a.key.localeCompare（b.key））；
}
}

如果使用angular cli，您可以使用ng generate pipe
创建一个，它会注意在所有适当的位置添加它，以便正确连接
您可以在angular 2文档中阅读有关管道的更多信息。在将对象显示在ui上或使用管道之前，您应该将其转换为数组。@toskv，假设我使用Rauluco方法转换数组。。没问题；你能创建这个管道让我看一个例子吗？（我想开始使用它们）我添加了答案，如果您需要关于如何配置它们的更多信息，我可以添加它们。如果你不使用命令行或者你想要更多的信息，我喜欢你的方法
<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>