Question

我有一个JSON响应，我想通过它以特定的单词或字母开头。

我需要它来排序以"ItenaryFor": "Sightseen"开头的ItenaryFor 请查看以下来自API的JSON响应。

这是我的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
            }
        ]
    }
}

请给我建议。

Answer 1

您可以使用Array.sort来实现此目的。请参阅 docs 。

参考下面的例子：

＆＃13;

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

＆＃13;

Plunker demo 关于将其作为管道实施。

Answer 2

使用烟斗进行分拣不是一个好主意。请参阅此处的链接：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);
    }
}

sort数组以angular2中的特定单词或字母开头

2 个答案: