отсортировать список по имени в массиве в ionic3

Question

как отсортировать список по firstName из массива

my.ts file

initializeItems(){
    this.items = [
      { avatar: '../../assets/imgs/profile1.jpg', firstName:'Sterlian', lastName:'Victorian',  date:new Date().toLocaleDateString(), chat:'Life is beautiful...', component: TetherPage },
      { avatar: '../../assets/imgs/profile2.jpg', firstName:'Alexis', lastName:' Fournier ', date:'Yesterday', chat:'If you are going to use a passage...', component: TetherPage },
      { avatar: '../../assets/imgs/profile3.jpg', firstName:'Alma', lastName:'  Henry ', date:'10/1/2019', chat:'There are many variations of pass', component: TetherPage },
      { avatar: '../../assets/imgs/profile4.jpg', firstName:'Clara', lastName:' Damian ', date:'Today', chat:'nice to see you after log time ', component: TetherPage },
      { avatar: '../../assets/imgs/profile5.jpg', firstName:'James', lastName:' Charlie ', date:'Yesterday', chat:'Hi!..Have a nice day', component: TetherPage },
      { avatar: '../../assets/imgs/profile6.jpg', firstName:'Ellen', lastName:' Rhystem ', date:'2/1/2019', chat:'It is long establish fact...', component: TetherPage },
      { avatar: '../../assets/imgs/profile7.jpg', firstName:'Irene', lastName:' Reeceem ', date: new Date().toLocaleDateString(), chat:'I think we can all do with a bit more spark', component: TetherPage },
      { avatar: '../../assets/imgs/profile8.jpg', firstName:'Thomas', lastName:' Joe ', date:'Yesterday', chat:'you’re fired up ready to have the best day ever…', component: TetherPage },
      { avatar: '../../assets/imgs/profile9.jpg', firstName:'Charlie', lastName:' Kyle ', date:'3:45 am', chat:'Create the highest, grandest vision possible for your life, because you become what you believe', component: TetherPage },
      { avatar: '../../assets/imgs/profile10.jpg', firstName:'Jacob', lastName:' Henry ', date: new Date().toLocaleDateString(), chat:'Wherever life plants you, bloom with grace', component: TetherPage },
      { avatar: '../../assets/imgs/profile11.jpg', firstName:'Harry', lastName:' Callum ', date:'1/2/2019', chat:'One at a time. Just let your pile of good things grow', component: TetherPage },
      { avatar: '../../assets/imgs/profile12.jpg', firstName:'Oliver', lastName:' Jake ', date: new Date().toLocaleDateString(), chat:'Little by little, day by day, what is mean for you WILL find its way”', component: TetherPage },
      { avatar: '../../assets/imgs/profile13.jpg', firstName:'Jack', lastName:' Connor ', date:'Yesterday', chat:'Learn from yesterday, live for today, hope for tomorrow', component: TetherPage },
      { avatar: '../../assets/imgs/profile14.jpg', firstName:'Julia', lastName:' Margaret ', date: new Date().toLocaleDateString(), chat:'Take time to do what makes your soul happy', component: TetherPage },
      { avatar: '../../assets/imgs/profile15.jpg', firstName:'Jack', lastName:' Tracy ', date:'Today', chat:'Be so happy that when others look at you, they become happy too', component: TetherPage }
    ];
    this.modifiedData = JSON.parse(JSON.stringify(this.items));

}

Answer 1

Вы можете отсортировать список, используя Array.sort, и пользовательскую функцию сравнения, используя String.localCompare:

const sorted = items.sort((a, b) => a.firstName.localeCompare(b.firstName));

См. Документ MDN о Array.sort и String.localCompare .

const TetherPage = {};
const items = [
      { avatar: '../../assets/imgs/profile1.jpg', firstName:'Sterlian', lastName:'Victorian',  date:new Date().toLocaleDateString(), chat:'Life is beautiful...', component: TetherPage },
      { avatar: '../../assets/imgs/profile2.jpg', firstName:'Alexis', lastName:' Fournier ', date:'Yesterday', chat:'If you are going to use a passage...', component: TetherPage },
      { avatar: '../../assets/imgs/profile3.jpg', firstName:'Alma', lastName:'  Henry ', date:'10/1/2019', chat:'There are many variations of pass', component: TetherPage },
      { avatar: '../../assets/imgs/profile4.jpg', firstName:'Clara', lastName:' Damian ', date:'Today', chat:'nice to see you after log time ', component: TetherPage },
      { avatar: '../../assets/imgs/profile5.jpg', firstName:'James', lastName:' Charlie ', date:'Yesterday', chat:'Hi!..Have a nice day', component: TetherPage },
      { avatar: '../../assets/imgs/profile6.jpg', firstName:'Ellen', lastName:' Rhystem ', date:'2/1/2019', chat:'It is long establish fact...', component: TetherPage },
      { avatar: '../../assets/imgs/profile7.jpg', firstName:'Irene', lastName:' Reeceem ', date: new Date().toLocaleDateString(), chat:'I think we can all do with a bit more spark', component: TetherPage },
      { avatar: '../../assets/imgs/profile8.jpg', firstName:'Thomas', lastName:' Joe ', date:'Yesterday', chat:'you’re fired up ready to have the best day ever…', component: TetherPage },
      { avatar: '../../assets/imgs/profile9.jpg', firstName:'Charlie', lastName:' Kyle ', date:'3:45 am', chat:'Create the highest, grandest vision possible for your life, because you become what you believe', component: TetherPage },
      { avatar: '../../assets/imgs/profile10.jpg', firstName:'Jacob', lastName:' Henry ', date: new Date().toLocaleDateString(), chat:'Wherever life plants you, bloom with grace', component: TetherPage },
      { avatar: '../../assets/imgs/profile11.jpg', firstName:'Harry', lastName:' Callum ', date:'1/2/2019', chat:'One at a time. Just let your pile of good things grow', component: TetherPage },
      { avatar: '../../assets/imgs/profile12.jpg', firstName:'Oliver', lastName:' Jake ', date: new Date().toLocaleDateString(), chat:'Little by little, day by day, what is mean for you WILL find its way”', component: TetherPage },
      { avatar: '../../assets/imgs/profile13.jpg', firstName:'Jack', lastName:' Connor ', date:'Yesterday', chat:'Learn from yesterday, live for today, hope for tomorrow', component: TetherPage },
      { avatar: '../../assets/imgs/profile14.jpg', firstName:'Julia', lastName:' Margaret ', date: new Date().toLocaleDateString(), chat:'Take time to do what makes your soul happy', component: TetherPage },
      { avatar: '../../assets/imgs/profile15.jpg', firstName:'Jack', lastName:' Tracy ', date:'Today', chat:'Be so happy that when others look at you, they become happy too', component: TetherPage }
];

const sorted = items.sort((a, b) => a.firstName.localeCompare(b.firstName));
console.log(sorted);

Answer 2

Вы можете добиться этого, сделав что-то вроде этого:

let items = [ {  firstName:'Random', lastName:' Fournier ', date:'Yesterday', chat:'If you are going to use a passage...', }, {  firstName:'Alma', lastName:' Henry ' }, {  firstName:'Clara', lastName:' Damian ' } ];

items = sortByKey(items, 'firstName');

function sortByKey(array, key) {
 return array.sort(function(a, b) {
    var x = a[key]; var y = b[key];
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
 });
}