Incorrect Array Sorting in Angular 6

Question

I m using *ngFor to iterate array of objects in data-table and for serial no. i using let index of i and then printing it to the table but the problem i m facing is that after 9th serial no. i got 10 but after 1 serial no. like 1, 10, 11, 2, 3. Can anyone help me with this? Here's my typescript code and html code.

// GETTING BONUS DATA
 getAllJobposts() {
 this.apiService.hrService.getAllJobPost().subscribe((res: any) => {
  this.jobPostsData = res.data;
  console.log(this.jobPostsData);
  // this.DataTablesFunctionCallAfterDataInit()
 });
}

 <tr class="MousePointer" (click)="EditRecord(post.id, target)" *ngFor="let 
   post of jobPostsData | reverse; let i = index">

              <td>{{ i+1 }}</td>
              <td>
                <span style="display: inline">
                  <a class=" btn btn-link btn-sm " title="Delete" [id]="post.id" (click)="$event.stopPropagation();modal.ShowModal(post.id)">
                    <i [ngStyle]="{color: 'blue'}" class="fa fa-trash-o ">
                    </i>
                  </a>
                  <a class="btn btn-link btn-sm btn-round" title="Edit" (click)="$event.stopPropagation();EditRecord(post.id,target)">
                    <i [ngStyle]="{color: 'blue'}" class="fa fa-pencil-square-o "></i>
                  </a>
                </span>
              </td>
              <td>{{ post.jobTitle }}</td>
              <td>{{ getDepartmentName(post.departmentId) }}</td>
              <td>{{ getDesignationName(post.designationId) }}</td>
              <td>{{ post.totalPosition }}</td>
              <td>{{ post.minExperience }}</td>
              <td>{{ getCityName(post.cityId) }}</td>
              <td>
                <span [class]="post.active == 1? 'status success':'status danger'" style="width:60px !important; text-align: center;">
                  {{post.active == 1? "Active":"In-Active" }}
                </span>
              </td>
            </tr>

@AbdulBasit the project is really big so that's why i can't post it to stackblitz... — Mohammad Quanit, Mar 12 '19 at 10:20
@MohammadQuanit i think your array is not sorted properly.. Try to remove the `pipe` from your loop — Abdul Basit, Mar 12 '19 at 11:02
@Arikael yes, it is sorted but it's just not working properly in html table — Mohammad Quanit, Mar 12 '19 at 11:05
Looks like it's sorting your column as a string and not a number. It's hard to say exactly what the problem is without seeing the rest of your code. What table element are you using? — Darren Lamb, Mar 12 '19 at 11:06
@DarrenLamb i m using datatable from https://datatables.net/ — Mohammad Quanit, Mar 12 '19 at 11:20
Can you please update the example to show the table and how you initialise it? Both the HTML and the TS — Darren Lamb, Mar 12 '19 at 11:37

score 1 · Answer 1 · answered Mar 14 '19 at 13:46

Seems you need rewrite your reverse pipe by something like this:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
  transform(value) {
    return value.sort((a, b) => {
      return (b.id - a.id);
    }); 
  }
}

In sort function you need to specify object filed for sorting: return (b.id - a.id).

Or use parseInt(b.id) - parseInt(a.id) if id's are strings (otherwise it will output the same result as in your screenshot, i.e. alphabetically)

Additionally you can pass object field for sorting via parameters of pipe

Incorrect Array Sorting in Angular 6

1 Answers1