Custom pipe to sort array of array

Question

I have a array of array having two elements each, i.e. arr[a[2]]. Index 0 is name and index 1 is size . I want a pipe to sort the array of array according to size ie index 1 .

Example:

arr [ [ 'hello' , '1' ] , [ 'how' , '5' ] , [ 'you' , '12' ] , [ 'are' , '6' ] ]

Output of pipe should be :

arr [ [ 'hello' , '1' ] , [ 'how' , '5' ] , [ 'are' , '6' ] , [ 'you' , '12' ] ]

HTML file:

<p> {{items  | custompipe }}</p>

Do you have a question? This isn't a code writing service; read the docs and have a go. — jonrsharpe
– jonrsharpe, Commented Jul 19, 2017 at 19:50
Then read the docs, we aren't here for tutorials either. — jonrsharpe
– jonrsharpe, Commented Jul 19, 2017 at 19:58
use the search, something like this should get you started. stackoverflow.com/questions/35158817/angular-2-orderby-pipe/… — Zuriel
– Zuriel, Commented Jul 19, 2017 at 20:00

DeborahK · Accepted Answer · 2017-07-19 20:23:44Z

3

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

edited Jul 19, 2017 at 20:23

answered Jul 19, 2017 at 20:14

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zuriel Over a year ago

thanks for the reply, I love your videos on pluralsight, they've helped me immensely in my learning. This answer was helpful to me because I have been using a OrderBySort pipe, even though I know of the performance ramifications. Its nice to see a better way to to do it and I plan on refactoring some of my code. Thanks!

sfors says reinstate Monica Over a year ago

See DeborahK's comment here for the link to her complete solution at stackoverflow.com/questions/46780843/… and blogs.msmvps.com/deborahk/filtering-in-angular on how to properly handle filtering without using pipes.

Collectives™ on Stack Overflow

Custom pipe to sort array of array

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related