Angular Json数组排序

背景

现有数据源，格式如下：

export const students = [
	{ school: 'hx11', grade: 'one', name: 'zy', course: 'math', fraction: '80.01234567', average: '80' },
	{ school: 'hx11', grade: 'one', name: 'zy', course: 'chinese', fraction: '81.01234567', average: '80' },
	{ school: 'hx11', grade: 'one', name: 'zy', course: 'english', fraction: '82.01234567', average: '80' },
	{ school: 'hx11', grade: 'two', name: 'xh', course: 'math', fraction: '80.01234567', average: '80' },
	{ school: 'hx11', grade: 'two', name: 'xh', course: 'chinese', fraction: '81.01234567', average: '80' },
	{ school: 'hx11', grade: 'two', name: 'xh', course: 'english', fraction: '82.01234567', average: '80' },
	{ school: 'hx11', grade: 'one', name: 'xm', course: 'math', fraction: '80.01234567', average: '80' },
	{ school: 'hx11', grade: 'one', name: 'xm', course: 'chinese', fraction: '81.01234567', average: '80' },
	{ school: 'hx11', grade: 'one', name: 'xm', course: 'english', fraction: '82.01234567', average: '80' },
];

需对该数据源的多列进行排序，如按average、grade、name进行排序。

核心

通过调用sort方法对Json数组进行排序。

let sortKeys = ['average', 'grade', 'name']	;
arr.sort((a, b) => {
		if (!sortKeys || sortKeys.length === 0) return 0;
		for (let index = 0; index < sortKeys.length; index++) {
			let item = sortKeys[index];
			if (a[item] !== b[item]) {
				let result = a[item] > b[item] ? 1 : a[item] === b[item] ? 0 : -1;
				return direction == SortDirection.ASC ? result : result * -1;
			}
		}
	});

操作

• 对Array进行扩展

  import { Sort, SortDirection } from '../models/common/sort';
  
  declare global {
  	interface Array<T> {
  		sortByKeys(sortKeys: string[], direction: SortDirection): Array<T>;
  		sortByKeysAndDirection(sortKeys: Sort[]): Array<T>;
  	}
  }
  
  Array.prototype.sortByKeys = function (sortKeys: string[], direction: SortDirection = SortDirection.ASC) {
  	let arr = <Array<any>>this;
  	arr.sort((a, b) => {
  		if (!sortKeys || sortKeys.length === 0) return 0;
  		for (let index = 0; index < sortKeys.length; index++) {
  			let item = sortKeys[index];
  			if (a[item] !== b[item]) {
  				let result = a[item] > b[item] ? 1 : a[item] === b[item] ? 0 : -1;
  				return direction == SortDirection.ASC ? result : result * -1;
  			}
  		}
  	});
  	return arr;
  };
  
  Array.prototype.sortByKeysAndDirection = function (sortKeys: Sort[]) {
  	let arr = <Array<any>>this;
  	arr.sort((a, b) => {
  		if (!sortKeys || sortKeys.length === 0) return 0;
  		sortKeys.forEach((item, index) => {
  			if (a[item.key] !== b[item.key]) {
  				let result = a[item.key] > b[item.key] ? 1 : a[item.key] === b[item.key] ? 0 : -1;
  				return item.direction == SortDirection.ASC ? result : result * -1;
  			}
  		});
  	});
  	return arr;
  };
  
  export {};
  

• Sort类

  export class Sort {
  	key: string;
  	direction: SortDirection = SortDirection.ASC;
  }
  
  export enum SortDirection {
  	ASC,
  	DESC,
  }
  

• 调用

  students.sortByKeys(['average', 'grade', 'name'], SortDirection.ASC);
  

  排序后结果：

  [
  {"school":"hx11","grade":"one","name":"xm","course":"chinese","fraction":"81.01234567","average":"80"},{"school":"hx11","grade":"one","name":"xm","course":"english","fraction":"82.01234567","average":"80"},{"school":"hx11","grade":"one","name":"xm","course":"math","fraction":"80.01234567","average":"80"},{"school":"hx11","grade":"one","name":"zy","course":"chinese","fraction":"81.01234567","average":"80"},{"school":"hx11","grade":"one","name":"zy","course":"english","fraction":"82.01234567","average":"80"},{"school":"hx11","grade":"one","name":"zy","course":"math","fraction":"80.01234567","average":"80"},{"school":"hx11","grade":"two","name":"xh","course":"chinese","fraction":"81.01234567","average":"80"},{"school":"hx11","grade":"two","name":"xh","course":"english","fraction":"82.01234567","average":"80"},{"school":"hx11","grade":"two","name":"xh","course":"math","fraction":"80.01234567","average":"80"}
  ]