angular 2 order by pipe not working with same value in any column

195 Views Asked by At

Well, I have an array objects with random values. Ex.

        var value = [
            {"name":"ABC","status":"R","city":"Pune"},
            {"name":"PQR","status":"R","city":"Nashik"},
            {"name":"APR","status":"R","city":"Mumbai"},
            {"name":"STY","status":"R","city":"Delhi"},
            {"name":"XYZ","status":"R","city":"Ranchi"},
            {"name":"LMN","status":"R","city":"Dhule"},
        ];

Please see below HTML File:

<table>
  <thead>
    <tr>
      <th (click)="changeOrderBy('name')"> Name </th>
      <th (click)="changeOrderBy('status')"> Status </th>
      <th (click)="changeOrderBy('city')"> City </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of items | orderBy:orderbyset">
      <th>{{item.name}} </th>
      <th>{{item.status}} </th>
      <th> {{item.city}}</th>
    </tr>
  </tbody>
</table>

TS File :

    export class abc implements OnInit {
    private orderbyset:string = 'status';
    changeOrderBy(orderby: string) {
        let direction = '+'; // default
        if (this.orderbyset.indexOf(orderby) !== -1) {
        if (this.orderbyset.indexOf('+') !== -1) { direction = '-'; }
        }
        this.orderbyset = direction + orderby;
    }
   } 

Please see below Orderby Pipe File :

import {
  Pipe,
  PipeTransform
} from '@angular/core';


@Pipe({
  name: 'orderBy',
  pure: false
})
export class OrderByConnectedPipe implements PipeTransform {

  value: string[] = [];

  private static _orderByComparator(a: any, b: any): number {

    if ((a === null || a === undefined) && (b === null || b === undefined)) {
      return 0;
    }

    if (a === null || a === undefined) {
      a = (isNaN(parseFloat(b)) || !isFinite(b)) ? '' : 0;
    }

    if (b === null || b === undefined) {
      b = (isNaN(parseFloat(a)) || !isFinite(a)) ? '' : 0;
    }

    if ((isNaN(parseFloat(a)) || !isFinite(a)) || (isNaN(parseFloat(b)) || !isFinite(b))) {
      if (a.toLocaleLowerCase() < b.toLocaleLowerCase()) {
        return -1;
      }
      if (a.toLocaleLowerCase() > b.toLocaleLowerCase()) {
        return 1;
      }
    } else {
      if (parseFloat(a) < parseFloat(b)) {
        return -1;
      }
      if (parseFloat(a) > parseFloat(b)) {
        return 1;
      }
    }

    return 0;
  }

  transform(input: any, config: string = '+'): any {

    //invalid input given
    if (!input) return input;

    //make a copy of the input's reference
    this.value = [...input];
    let value = this.value;

    if (!Array.isArray(value)) {
      return value;
    }

    if (!Array.isArray(config) || (Array.isArray(config) && config.length == 1)) {
      let propertyToCheck: string = !Array.isArray(config) ? config : config[0];
      let desc = propertyToCheck.substr(0, 1) == '-';

      //Basic array
      if (!propertyToCheck || propertyToCheck == '-' || propertyToCheck == '+') {
        return !desc ? value.sort() : value.sort().reverse();
      } else {
        let property: string = propertyToCheck.substr(0, 1) == '+' || propertyToCheck.substr(0, 1) == '-' ?
          propertyToCheck.substr(1) :
          propertyToCheck;


        return value.sort(function(a: any, b: any) {
          let aValue = a[property];
          let bValue = b[property];

          let propertySplit = property.split('.');

          if (typeof aValue === 'undefined' && typeof bValue === 'undefined' && propertySplit.length > 1) {
            aValue = a;
            bValue = b;
            for (let j = 0; j < propertySplit.length; j++) {
              aValue = aValue[propertySplit[j]];
              bValue = bValue[propertySplit[j]];
            }
          }

          return !desc ?
            OrderByConnectedPipe._orderByComparator(aValue, bValue) :
            -OrderByConnectedPipe._orderByComparator(aValue, bValue);
        });
      }
    } else {
      //Loop over property of the array in order and sort
      return value.sort(function(a: any, b: any) {
        for (let i: number = 0; i < config.length; i++) {
          let desc = config[i].substr(0, 1) == '-';
          let property = config[i].substr(0, 1) == '+' || config[i].substr(0, 1) == '-' ?
            config[i].substr(1) :
            config[i];

          let aValue = a[property];
          let bValue = b[property];

          let propertySplit = property.split('.');

          if (typeof aValue === 'undefined' && typeof bValue === 'undefined' && propertySplit.length > 1) {
            aValue = a;
            bValue = b;
            for (let j = 0; j < propertySplit.length; j++) {
              aValue = aValue[propertySplit[j]];
              bValue = bValue[propertySplit[j]];
            }
          }

          let comparison = !desc ?
            OrderByConnectedPipe._orderByComparator(aValue, bValue) :
            -OrderByConnectedPipe._orderByComparator(aValue, bValue);

          //Don't return 0 yet in case of needing to sort by next property
          if (comparison != 0) {
            return comparison;
          }
        }

        return 0; //equal each other
      });
    }
  }
}

export let ORDERBY_PROVIDERS = [
  OrderByConnectedPipe
];

I wanted to sort this resultant array by any column like name,status and city.But what happened is when I sort by column "name" and "city" it is working fine but when I sort by column "status" then resultant set get sorted in different order.Actually as we can see column values in "status" are same in resultant set.Please suggest me best way to get this.

0

There are 0 best solutions below