排序数组以angular2中的特定单词或字母开头
sort array starts with specific word or letter in angular2
我有一个 JSON 回复,我想按照以特定单词或字母开头的回复进行排序。
我需要它来对以 "ItenaryFor": "Sightseen"
开头的 ItenaryFor 进行排序
请检查下面 JSON 来自 API 的回复。
这是我的 JSON:
{
"resultCode": 1,
"resultData": {
"Itinary": [
{
"ItenaryFor": "Transfer",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Sightseen",
"Icon": "holiday",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Sightseen",
"Icon": "holiday",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": null,
"BackgroundImg": null
},
{
"ItenaryFor": "Sightseen",
"Icon": "holiday",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Coral Island",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Coral Island",
"BackgroundImg": null
}
]
}
}
请给我建议。
您可以使用 Array.sort
来实现这一点。参见 docs。
参考下面的例子:
var arr = [{
"ItenaryFor": "Transfer",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Sightseen",
"Icon": "holiday",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Sightseen",
"Icon": "holiday",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": null,
"BackgroundImg": null
},
{
"ItenaryFor": "Sightseen",
"Icon": "holiday",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Coral Island",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Coral Island",
"BackgroundImg": null
}
];
arr.sort(function(a,b) {
if(a.ItenaryFor.indexOf('Sightseen') === 0) {
return -1;
} else {
return 1;
}
});
console.log(arr);
Plunker demo关于将其实现为管道。
使用管道进行排序不是一个好主意。请参阅此处的 link:https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
而是在组件中添加代码来执行排序。
这是一个例子。这是一个过滤器,但您可以将其更改为排序。
import { Component, OnInit } from '@angular/core';
import { IProduct } from './product';
import { ProductService } from './product.service';
@Component({
templateUrl: './product-list.component.html'
})
export class ProductListComponent implements OnInit {
_listFilter: string;
get listFilter(): string {
return this._listFilter;
}
set listFilter(value: string) {
this._listFilter = value;
this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
}
filteredProducts: IProduct[];
products: IProduct[] = [];
constructor(private _productService: ProductService) {
}
performFilter(filterBy: string): IProduct[] {
filterBy = filterBy.toLocaleLowerCase();
return this.products.filter((product: IProduct) =>
product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
}
ngOnInit(): void {
this._productService.getProducts()
.subscribe(products => {
this.products = products;
this.filteredProducts = this.products;
},
error => this.errorMessage = <any>error);
}
}
我有一个 JSON 回复,我想按照以特定单词或字母开头的回复进行排序。
我需要它来对以 "ItenaryFor": "Sightseen"
开头的 ItenaryFor 进行排序
请检查下面 JSON 来自 API 的回复。
这是我的 JSON:
{
"resultCode": 1,
"resultData": {
"Itinary": [
{
"ItenaryFor": "Transfer",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Sightseen",
"Icon": "holiday",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Sightseen",
"Icon": "holiday",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": null,
"BackgroundImg": null
},
{
"ItenaryFor": "Sightseen",
"Icon": "holiday",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Coral Island",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Coral Island",
"BackgroundImg": null
}
]
}
}
请给我建议。
您可以使用 Array.sort
来实现这一点。参见 docs。
参考下面的例子:
var arr = [{
"ItenaryFor": "Transfer",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Sightseen",
"Icon": "holiday",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Sightseen",
"Icon": "holiday",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Phi Phi Island, Phuket City Tour",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": null,
"BackgroundImg": null
},
{
"ItenaryFor": "Sightseen",
"Icon": "holiday",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Coral Island",
"BackgroundImg": ""
},
{
"ItenaryFor": "Hotel",
"Icon": "motel",
"Comment": null,
"Iscustomsave": true,
"TourDelight": "Coral Island",
"BackgroundImg": null
}
];
arr.sort(function(a,b) {
if(a.ItenaryFor.indexOf('Sightseen') === 0) {
return -1;
} else {
return 1;
}
});
console.log(arr);
Plunker demo关于将其实现为管道。
使用管道进行排序不是一个好主意。请参阅此处的 link:https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
而是在组件中添加代码来执行排序。
这是一个例子。这是一个过滤器,但您可以将其更改为排序。
import { Component, OnInit } from '@angular/core';
import { IProduct } from './product';
import { ProductService } from './product.service';
@Component({
templateUrl: './product-list.component.html'
})
export class ProductListComponent implements OnInit {
_listFilter: string;
get listFilter(): string {
return this._listFilter;
}
set listFilter(value: string) {
this._listFilter = value;
this.filteredProducts = this.listFilter ? this.performFilter(this.listFilter) : this.products;
}
filteredProducts: IProduct[];
products: IProduct[] = [];
constructor(private _productService: ProductService) {
}
performFilter(filterBy: string): IProduct[] {
filterBy = filterBy.toLocaleLowerCase();
return this.products.filter((product: IProduct) =>
product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
}
ngOnInit(): void {
this._productService.getProducts()
.subscribe(products => {
this.products = products;
this.filteredProducts = this.products;
},
error => this.errorMessage = <any>error);
}
}