Angular, TypeError: Cannot read property 'sort' of undefined

Question

i'm trying to make a sorting function and pipe for a table by following this link and here is the plunker of that example. From the example that i'm following the table header should be clickable and do the sort() function. My pipe name is prdSort. I'm also using ngx-pagination but i don't think that the main cause of this error.

//part of service.ts
productList: AngularFireList < any > ;
//end

//component.ts
productList: Product[];

isDesc: boolean = false;
column: string = 'prdName';
records = this.productList
sort(property) {
  this.isDesc = !this.isDesc; //change the direction    
  this.column = property;
  let direction = this.isDesc ? 1 : -1;
};

<!-- table header -->
<th (click)="sort('prdName')">Name</th>

<!--table row-->
<tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | prdSort: {property: column, direction: direction} ">

//pipe.ts

transform(records: any, args ? : any): any {

  return records.sort(function(a, b) {
    if (records !== undefined) {
      if (a[args.property] < b[args.property]) {
        return -1 * args.direction;
      } else if (a[args.property] > b[args.property]) {
        return 1 * args.direction;
      } else {
        return 0;
      }
    }
    return records;
  });
};

I alse already included the pipe file to app.module.ts. Please let me know if more snippets are needed.

Please paste here your error from console. Just copy paste please. Looking at your title sort of undefined points to that in your pipe records is undefined so sort can't be executed. — Patryk Brejdak
– Patryk Brejdak, Commented Nov 20, 2017 at 7:29
ERROR TypeError: Cannot read property 'sort' of undefined at PrdSortPipe.transform (prd-sort.pipe.ts:13) at checkAndUpdatePureExpressionInline (core.js:12899) at checkAndUpdateNodeInline (core.js:13602) at checkAndUpdateNode (core.js:13541) at debugCheckAndUpdateNode (core.js:14413) at debugCheckDirectivesFn (core.js:14354) at Object.eval [as updateDirectives] (ProductComponent.html:63) at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339) at checkAndUpdateView (core.js:13508) at callViewAction (core.js:13858) — Wira Xie
– Wira Xie, Commented Nov 20, 2017 at 7:31

Faly · Accepted Answer · 2017-11-20 07:25:29Z

5

Try to initialize your productList with an empty array:

// component.ts:

productList: Product[] = [];

For more security, to prevent calling array.prototype.sort on a variable that is undefined instead of an array, you can add the code below in your filter:

transform(records: any, args ? : any): any {
    records = records || [];  // set records to an empty array if undefined
    return records.sort(function(a, b) { ... });
}

answered Nov 20, 2017 at 7:25

Faly

13.4k2 gold badges21 silver badges39 bronze badges

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

Comments

Patryk Brejdak · Accepted Answer · 2017-11-20 07:55:39Z

As @Faly answered this almost perfectly, but your pipe use is invalid in my guess.

From this

<tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | prdSort: {property: column, direction: direction} ">

Change to this

<tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | prdSort: column : direction ">

(Pass arguments changed.)

Also from @Faly

transform(records: any, args ? : any): any {
    records = records || [];  // set records to an empty array if undefined
    return records.sort(function(a, b) { ... });
}

Explaination: When you look at your error ERROR TypeError: Cannot read property 'sort' of undefined at PrdSortPipe.transform you are trying to use sort function on undefined due to in my guess badly passed args to pipe. So your pipe gets undefined value on which can't be executed sort method. Look at this answer about multiple args in pipe.

Prithivi Raj · Accepted Answer · 2017-11-20 07:33:03Z

0

change the prdSort filter to pass only the property name which you want to be sorted.

<tr *ngFor="let product of productList |  prdSort: 'prdName' ">

You can also include pagination too in the same line

answered Nov 20, 2017 at 7:33

Prithivi Raj

2,7361 gold badge22 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angular, TypeError: Cannot read property 'sort' of undefined

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related