javascript - סידור מערך של אובייקטים לפי שדה האובייקט ב-Angular 6

אני מקבל מערך של "מוצר"ים ממפענח שמקבל נתונים מנקודת קצה JSON.

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

שבו אחד מהעצמים במערך זה נמצא בפורמט

 {
    "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": ""
    },
    ...
},

מה שאני רוצה לעשות זה למיין את המערך הזה לפי השדה title.rendered

בעבר, ב-AngularJS, פשוט השתמשתי בצינור orderBy בתבנית שהוגדר לשדה הזה. כנראה, זה הוסר ב-Angular וממבוסס על מחקר נראה שהשיטה המועדפת היא למיין את הנתונים עצמם, כמו ב-ngOnInit.

אבל אני לא מצליח להבין איך למיין את products לפי producs.title.rendered.

תשובה #1

אתה יכול פשוט להשתמש ב-Arrays.sort()

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

דוגמה עובדת:

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);

תשובה #2

נסה את זה

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

או

אתה יכול לייבא את ספריית lodash/underscore, היא מכילה הרבה פונקציות מובנות זמינות עבור עיבוד, סינון, מיון של המערך ועוד.

שימוש בקו תחתון: (הבא הוא רק דוגמה)

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