Sortieren eines Arrays von Objekten nach Eigenschaftswerten

Question

Ich habe die folgenden Objekte über AJAX erhalten und in einem Array gespeichert:

var homes = [
    {
        "h_id": "3",
        "city": "Dallas",
        "state": "TX",
        "zip": "75201",
        "price": "162500"
    }, {
        "h_id": "4",
        "city": "Bevery Hills",
        "state": "CA",
        "zip": "90210",
        "price": "319250"
    }, {
        "h_id": "5",
        "city": "New York",
        "state": "NY",
        "zip": "00010",
        "price": "962500"
    }
];

Wie erstelle ich eine Funktion zum Sortieren der Objekte nach dem price Eigentum in aufsteigend o absteigend nur mit JavaScript bestellen?

Answer 1

Ich empfehle GitHub: Array sortBy - eine optimale Umsetzung von sortBy Methode, die die Schwartzsche Transformation

Aber für den Moment werden wir diesen Ansatz versuchen Gist: sortBy-old.js .
Erstellen wir eine Methode zum Sortieren von Arrays, die in der Lage ist, Objekte nach einer Eigenschaft zu ordnen.

Erstellen der Sortierfunktion

var sortBy = (function () {
  var toString = Object.prototype.toString,
      // default parser function
      parse = function (x) { return x; },
      // gets the item to be sorted
      getItem = function (x) {
        var isObject = x != null && typeof x === "object";
        var isProp = isObject && this.prop in x;
        return this.parser(isProp ? x[this.prop] : x);
      };

  /**
   * Sorts an array of elements.
   *
   * @param  {Array} array: the collection to sort
   * @param  {Object} cfg: the configuration options
   * @property {String}   cfg.prop: property name (if it is an Array of objects)
   * @property {Boolean}  cfg.desc: determines whether the sort is descending
   * @property {Function} cfg.parser: function to parse the items to expected type
   * @return {Array}
   */
  return function sortby (array, cfg) {
    if (!(array instanceof Array && array.length)) return [];
    if (toString.call(cfg) !== "[object Object]") cfg = {};
    if (typeof cfg.parser !== "function") cfg.parser = parse;
    cfg.desc = !!cfg.desc ? -1 : 1;
    return array.sort(function (a, b) {
      a = getItem.call(cfg, a);
      b = getItem.call(cfg, b);
      return cfg.desc * (a < b ? -1 : +(a > b));
    });
  };

}());

Einstellung unsortierter Daten

var data = [
  {date: "2011-11-14T16:30:43Z", quantity: 2, total: 90,  tip: 0,   type: "tab"},
  {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90,  tip: 0,   type: "Tab"},
  {date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"},
  {date: "2011-11-14T16:53:41Z", quantity: 2, total: 90,  tip: 0,   type: "tab"},
  {date: "2011-11-14T16:48:46Z", quantity: 2, total: 90,  tip: 0,   type: "tab"},
  {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0,   type: "cash"},
  {date: "2011-11-31T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "Visa"},
  {date: "2011-11-14T16:58:03Z", quantity: 2, total: 90,  tip: 0,   type: "tab"},
  {date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-01T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"},
  {date: "2011-11-14T17:07:21Z", quantity: 2, total: 90,  tip: 0,   type: "tab"},
  {date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0,   type: "Cash"}
];

Verwendung

Ordnen Sie das Array an, indem Sie "date" como String

// sort by @date (ascending)
sortBy(data, { prop: "date" });

// expected: first element
// { date: "2011-11-01T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab" }

// expected: last element
// { date: "2011-11-31T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "Visa"}

Wenn Sie die Groß- und Kleinschreibung ignorieren wollen, setzen Sie die parser Rückruf:

// sort by @type (ascending) IGNORING case-sensitive
sortBy(data, {
    prop: "type",
    parser: (t) => t.toUpperCase()
});

// expected: first element
// { date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "Cash" }

// expected: last element
// { date: "2011-11-31T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "Visa" }

Wenn Sie die "date" Feld als Date Typ:

// sort by @date (descending) AS Date object
sortBy(data, {
    prop: "date",
    desc: true,
    parser: (d) => new Date(d)
});

// expected: first element
// { date: "2011-11-31T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "Visa"}

// expected: last element
// { date: "2011-11-01T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab" }

Hier können Sie mit dem Code spielen: jsbin.com/lesebi

Dank an @Ozesh seiner Rückmeldung, das Problem bezog sich auf Immobilien mit falsy Werte wurde festgelegt.

Answer 2

Sie wollen es in Javascript sortieren, richtig? Was Sie wollen, ist die sort() Funktion . In diesem Fall müssen Sie eine Komparatorfunktion schreiben und sie an sort() also in etwa so:

function comparator(a, b) {
    return parseInt(a["price"], 10) - parseInt(b["price"], 10);
}

var json = { "homes": [ /* your previous data */ ] };
console.log(json["homes"].sort(comparator));

Ihr Komparator nimmt jeweils eine der verschachtelten Hashes innerhalb des Arrays und entscheidet, welche höher ist, indem er das Feld "Preis" überprüft.

Answer 3

Utilisez lodash.sortBy (Anweisungen, die commonjs verwenden, können auch einfach die Skript-Include-Tag für das cdn am Anfang Ihrer html-Datei)

var sortBy = require('lodash.sortby');
// or
sortBy = require('lodash').sortBy;

Absteigende Reihenfolge

var descendingOrder = sortBy( homes, 'price' ).reverse();

Aufsteigende Reihenfolge

var ascendingOrder = sortBy( homes, 'price' );

Answer 4

Ich bin zwar etwas spät dran, aber hier ist meine Logik für die Sortierung.

function getSortedData(data, prop, isAsc) {
    return data.sort((a, b) => {
        return (a[prop] < b[prop] ? -1 : 1) * (isAsc ? 1 : -1)
    });
}

Answer 5

Sie können string1.localeCompare(string2) für den Stringvergleich verwenden

this.myArray.sort((a,b) => { 
    return a.stringProp.localeCompare(b.stringProp);
});

Beachten Sie, dass localCompare ist der Fall in empfindlich