sort array starts with specific word or letter in angular2

Question

I have a JSON response and I want to order by it which starts with specific words or letter.

I need it to sort ItenaryFor which starts with "ItenaryFor": "Sightseen" please check below JSON response from API.

here is my 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
            }
        ]
    }
}

Please give me suggestions.

can you explain more detail about `I need it to orderby ItenaryFor which starts with "ItenaryFor": "Sightseen"`? — Pengyy, Aug 22 '17 at 05:33
@Pengyy In response it has key `ItenaryFor` I need records which have values `"ItenaryFor": "Sightseen"` starts first means give it index 0,1,2 — Nikhil Radadiya, Aug 22 '17 at 05:35
Why the downvote? Your question is too broad, just lists your requirements, and doesn't show any research or effort on your part. Either the question is about sorting and it's a duplicate, or it's about building a pipe in Angular which is adequately described in the documentation. In any case, using a pipe to sort is not a good idea (which is also clearly explained in the [documentation](https://angular.io/guide/pipes)). — Robby Cornelissen, Aug 22 '17 at 05:44
You know `orderBy` was removed from Angular, but you don't know why? Read the pipe page. — , Aug 22 '17 at 05:48
@torazaburo Instead of using pipe, is it good idea to order from the component directly? — Nikhil Radadiya, Aug 22 '17 at 05:49
@torazaburo I know that but I'm not working on the API, so didn't care much — Nikhil Radadiya, Aug 22 '17 at 05:52

Pengyy · Accepted Answer · 2017-08-22T05:45:42.853

you can use Array.sort to achieve this. see docs.

refer below example:

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 about implementing it as a Pipe.

@NikhilRadadiya almost the same. wait a moment, I'll give you an example. — Pengyy, Aug 22 '17 at 05:40

score 0 · Answer 2 · answered Aug 22 '17 at 05:40

It's not a good idea to use a pipe for sorting. See the link here: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Rather, add code in your component to perform your sort.

Here is an example. This one filters, but you could change it to sort instead.

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

I don't like unwrapping the observable that much. Why not `.map` the original observable to a filtered observable, and then unwrap it with `async` pipe in the template? — , Aug 22 '17 at 05:49
Want to post an alternative answer with sample code for the OP? — DeborahK, Aug 22 '17 at 15:27

sort array starts with specific word or letter in angular2

2 Answers2