web-dev-qa-db-fra.com

Sort Tableau d'objets par champs d'objet dans Angular 6

Je reçois un tableau de "produits" d'un résolveur qui récupère les données d'un terminal JSON.

ngOnInit() {
  this.products = this._route.snapshot.data.products;
  console.log('products: ', this.products);
}

où l'un des objets de ce tableau est au format

 {
    "id": 3645,
    "date": "2018-07-05T13:13:37",
    "date_gmt": "2018-07-05T13:13:37",
    "guid": {
        "rendered": ""
    },
    "modified": "2018-07-05T13:13:37",
    "modified_gmt": "2018-07-05T13:13:37",
    "slug": "vpwin",
    "status": "publish",
    "type": "matrix",
    "link": "",
    "title": {
        "rendered": "VPWIN"
    },
    "content": {
        "rendered": "",
        "protected": false
    },
    "featured_media": 0,
    "parent": 0,
    "template": "",
    "better_featured_image": null,
    "acf": {
        "domain": "SMB",
        "ds_rating": "3",
        "dt_rating": ""
    },
    ...
},

Ce que je veux faire, c'est trier ce tableau par le champ title.rendered

Autrefois, dans AngularJS, j’utilisais simplement un tuyau orderBy dans le modèle défini pour ce champ. Apparemment, ceci est supprimé dans Angular et dans les recherches, il semble que la méthode préférée consiste à trier les données elles-mêmes, comme dans ngOnInit.

Mais je n'arrive pas à comprendre comment trier products par producs.title.rendered.

javascriptarraysangulartypescriptsorting
10
Steve

Vous pouvez simplement utiliser Arrays.sort()

array.sort((a,b) => a.title.rendered.localeCompare(b.title.rendered));

Exemple de travail:

var array = [{"id":3645,"date":"2018-07-05T13:13:37","date_gmt":"2018-07-05T13:13:37","guid":{"rendered":""},"modified":"2018-07-05T13:13:37","modified_gmt":"2018-07-05T13:13:37","slug":"vpwin","status":"publish","type":"matrix","link":"","title":{"rendered":"VPWIN"},"content":{"rendered":"","protected":false},"featured_media":0,"parent":0,"template":"","better_featured_image":null,"acf":{"domain":"SMB","ds_rating":"3","dt_rating":""},},{"id":3645,"date":"2018-07-05T13:13:37","date_gmt":"2018-07-05T13:13:37","guid":{"rendered":""},"modified":"2018-07-05T13:13:37","modified_gmt":"2018-07-05T13:13:37","slug":"vpwin","status":"publish","type":"matrix","link":"","title":{"rendered":"adfPWIN"},"content":{"rendered":"","protected":false},"featured_media":0,"parent":0,"template":"","better_featured_image":null,"acf":{"domain":"SMB","ds_rating":"3","dt_rating":""}},{"id":3645,"date":"2018-07-05T13:13:37","date_gmt":"2018-07-05T13:13:37","guid":{"rendered":""},"modified":"2018-07-05T13:13:37","modified_gmt":"2018-07-05T13:13:37","slug":"vpwin","status":"publish","type":"matrix","link":"","title":{"rendered":"bbfPWIN"},"content":{"rendered":"","protected":false},"featured_media":0,"parent":0,"template":"","better_featured_image":null,"acf":{"domain":"SMB","ds_rating":"3","dt_rating":""}}];
array.sort((a,b) => a.title.rendered.localeCompare(b.title.rendered));
 
 console.log(array);
26
amrender singh

Essayez ceci

products.sort(function (a, b) {
  return a.title.rendered - b.title.rendered;
});

OU

Vous pouvez importer la bibliothèque lodash/underscore. Elle dispose de nombreuses fonctions de construction permettant de manipuler, filtrer, trier le tableau, etc.

Utilisation du trait de soulignement: (ci-dessous, un exemple est donné)

import * as _ from 'underscore';
let sortedArray = _.sortBy(array, 'title');
7
Surjeet Bhadauriya

Non testé mais devrait fonctionner

 products.sort((a,b)=>a.title.rendered > b.title.rendered)
1
Luis felipe De jesus Munoz