JavaScript sort array of objects by property's array value

Question

I just want to clarify that this question is a bit different from the normal "how do you sort an array of objects by property."

I have created a function that sorts an array of objects. The goal is to sort by price but keeping objects that have the same price sorted alphabetically by the airline property's first element. It works well for the array directly below but it doesn't keep them alphabetical for the big data sample below the function. Can anyone help figure out what's going wrong here? They are sorting by price but somehow don't retain alphabetical order. For example, the first object shown is "ZP", but it shouldn't be.

May be easier to play with this plunkr link

var arr = [
  {"airline": ["AA"], "price": 9},
  {"airline": ["AA"], "price": 4},
  {"airline": ["DA"], "price": 5},
  {"airline": ["BA"], "price": 5},
  {"airline": ["ZA"], "price": 5},
  {"airline": ["AD"], "price": 5},
  {"airline": ["FC"], "price": 2},
  {"airline": ["CU"], "price": 4},
  {"airline": ["EA"], "price": 1}
];

var dom = document.getElementById('data');

// This works
// dom.innerHTML = JSON.stringify(sortByProp(arr, 'airline', 'price'), null, 2);

// name is to sort on a prop alphabetically by default
function sortByProp(arr, name, prop) {
  var mapped = arr;

  if (Array.isArray(arr[0][name])) {
    mapped = arr.map(function(obj) {
      var name1 = obj[name][0];
      obj[name] = name1;
      return obj;
    });
  }

  var others = [];

  var filtered = mapped.filter(function(object) {
    if (object.hasOwnProperty(prop) && object.hasOwnProperty(name)) {
      return object;
    }
    else {
      var other = arr.splice(arr.indexOf(object), 1)[0];
      others.push(other);
    }
  });

  var sortedByName = filtered.sort(function(obj1, obj2) {
    return obj1[name].toUpperCase().localeCompare(obj2[name].toUpperCase());
  });

  if (typeof sortedByName[0][prop] === 'string') {
    return sortedByName.concat(others);
  }
  else {
    return sortedByName.sort(function(a, b) {
      return a[prop] - b[prop];
    });
  }
}

var flights = [{
    "airline": ["ZP"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "680",
    "price": 1114,
    "duration": 685,
    "stops": ["KEF"],
    "returnOptions": [{
      "airline": ["FI"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "543",
      "duration": 755,
      "stops": ["KEF"]
    }]
  }, {
    "airline": ["GB"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "680",
    "price": 1114,
    "duration": 685,
    "stops": ["KEF"],
    "returnOptions": [{
      "airline": ["FI"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "543",
      "duration": 765,
      "stops": ["KEF"]
    }]
  }, {
    "airline": ["FI"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "680",
    "price": 1114,
    "duration": 685,
    "stops": ["KEF"],
    "returnOptions": [{
      "airline": ["FI"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "541",
      "duration": 1125,
      "stops": ["KEF"]
    }]
  }, {
    "airline": ["AC"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "680",
    "price": 1114,
    "duration": 685,
    "stops": ["KEF"],
    "returnOptions": [{
      "airline": ["FI"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "541",
      "duration": 1135,
      "stops": ["KEF"]
    }]
  }, {
    "airline": ["FI"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "7637",
    "price": 1761,
    "duration": 835,
    "stops": ["PDX", "KEF"],
    "returnOptions": [{
      "airline": ["FI"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "543",
      "duration": 755,
      "stops": ["KEF"]
    }]
  }, {
    "airline": ["FI"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "7637",
    "price": 1761,
    "duration": 835,
    "stops": ["PDX", "KEF"],
    "returnOptions": [{
      "airline": ["FI"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "543",
      "duration": 765,
      "stops": ["KEF"]
    }]
  }, {
    "airline": ["FI"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "7637",
    "price": 1761,
    "duration": 835,
    "stops": ["PDX", "KEF"],
    "returnOptions": [{
      "airline": ["FI"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "541",
      "duration": 1125,
      "stops": ["KEF"]
    }]
  }, {
    "airline": ["FI"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "7637",
    "price": 1761,
    "duration": 835,
    "stops": ["PDX", "KEF"],
    "returnOptions": [{
      "airline": ["FI"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "541",
      "duration": 1135,
      "stops": ["KEF"]
    }]
  }, {
    "airline": ["EI"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "5267",
    "price": 1807,
    "duration": 980,
    "stops": ["BOS", "DUB"],
    "returnOptions": [{
      "airline": ["EI"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "529",
      "duration": 1350,
      "stops": ["DUB", "LHR"]
    }]
  }, {
    "airline": ["UA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "8618",
    "price": 2206,
    "duration": 770,
    "stops": ["YYZ"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3632",
      "duration": 1285,
      "stops": ["BRU", "YYZ"]
    }]
  }, {
    "airline": ["AC"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "542",
    "price": 2206,
    "duration": 770,
    "stops": ["YYZ"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3632",
      "duration": 1285,
      "stops": ["BRU", "YYZ"]
    }]
  }, {
    "airline": ["UA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "278",
    "price": 2208,
    "duration": 835,
    "stops": ["ORD"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3632",
      "duration": 1285,
      "stops": ["BRU", "YYZ"]
    }]
  }, {
    "airline": ["UA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "419",
    "price": 2208,
    "duration": 837,
    "stops": ["IAD"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3632",
      "duration": 1285,
      "stops": ["BRU", "YYZ"]
    }]
  }, {
    "airline": ["AC"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "8090",
    "price": 2212,
    "duration": 925,
    "stops": ["YVR", "YUL"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3628",
      "duration": 1210,
      "stops": ["BRU", "ORD"]
    }]
  }, {
    "airline": ["AC"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "8090",
    "price": 2212,
    "duration": 925,
    "stops": ["YVR", "YUL"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3628",
      "duration": 1210,
      "stops": ["BRU", "ORD"]
    }]
  }, {
    "airline": ["UA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "8618",
    "price": 2219,
    "duration": 770,
    "stops": ["YYZ"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3628",
      "duration": 1210,
      "stops": ["BRU", "ORD"]
    }]
  }, {
    "airline": ["AC"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "542",
    "price": 2219,
    "duration": 770,
    "stops": ["YYZ"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3628",
      "duration": 1210,
      "stops": ["BRU", "ORD"]
    }]
  }, {
    "airline": ["UA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "8618",
    "price": 2219,
    "duration": 770,
    "stops": ["YYZ"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3632",
      "duration": 1240,
      "stops": ["BRU", "IAD"]
    }]
  }, {
    "airline": ["AC"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "542",
    "price": 2219,
    "duration": 770,
    "stops": ["YYZ"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3632",
      "duration": 1240,
      "stops": ["BRU", "IAD"]
    }]
  }, {
    "airline": ["AC"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "542",
    "price": 2219,
    "duration": 770,
    "stops": ["YYZ"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3628",
      "duration": 1315,
      "stops": ["BRU", "IAD"]
    }]
  }, {
    "airline": ["UA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "278",
    "price": 2221,
    "duration": 835,
    "stops": ["ORD"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3628",
      "duration": 1210,
      "stops": ["BRU", "ORD"]
    }]
  }, {
    "airline": ["UA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "419",
    "price": 2221,
    "duration": 837,
    "stops": ["IAD"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3628",
      "duration": 1210,
      "stops": ["BRU", "ORD"]
    }]
  }, {
    "airline": ["UA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "278",
    "price": 2221,
    "duration": 835,
    "stops": ["ORD"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3632",
      "duration": 1240,
      "stops": ["BRU", "IAD"]
    }]
  }, {
    "airline": ["UA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "419",
    "price": 2221,
    "duration": 837,
    "stops": ["IAD"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3632",
      "duration": 1240,
      "stops": ["BRU", "IAD"]
    }]
  }, {
    "airline": ["UA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "213",
    "price": 2221,
    "duration": 875,
    "stops": ["SFO"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3628",
      "duration": 1210,
      "stops": ["BRU", "ORD"]
    }]
  }, {
    "airline": ["UA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "213",
    "price": 2221,
    "duration": 875,
    "stops": ["SFO"],
    "returnOptions": [{
      "airline": ["SN"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3632",
      "duration": 1240,
      "stops": ["BRU", "IAD"]
    }]
  }, {
    "airline": ["DL"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "32",
    "price": 2249,
    "duration": 606,
    "returnOptions": [{
      "airline": ["DL"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "33",
      "duration": 639
    }]
  }, {
    "airline": ["AF"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "3653",
    "price": 2249,
    "duration": 606,
    "returnOptions": [{
      "airline": ["AF"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "3622",
      "duration": 639
    }]
  }, {
    "airline": ["AA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "44",
    "price": 2249,
    "duration": 850,
    "returnOptions": [{
      "airline": ["AA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "45",
      "duration": 1181
    }]
  }, {
    "airline": ["AC"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "8090",
    "price": 2256,
    "duration": 925,
    "stops": ["YVR", "YUL"],
    "returnOptions": [{
      "airline": ["AC"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "881",
      "duration": 1150,
      "stops": ["YYZ"]
    }]
  }, {
    "airline": ["UA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "213",
    "price": 2278,
    "duration": 875,
    "stops": ["SFO"],
    "returnOptions": [{
      "airline": ["UA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "914",
      "duration": 1020,
      "stops": ["IAD"]
    }]
  }, {
    "airline": ["IB"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "4602",
    "price": 2302,
    "duration": 1165,
    "stops": ["LGW"],
    "returnOptions": [{
      "airline": ["IB"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "4115",
      "duration": 1153,
      "stops": ["ORD"]
    }]
  }, {
    "airline": ["BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "4924",
    "price": 2306,
    "duration": 1306,
    "stops": ["ORD"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "315",
      "duration": 725,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["AA", "BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "1097",
    "price": 2306,
    "duration": 1310,
    "stops": ["ORD"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "315",
      "duration": 725,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "4924",
    "price": 2306,
    "duration": 1306,
    "stops": ["ORD"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "309",
      "duration": 840,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["AA", "BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "1097",
    "price": 2306,
    "duration": 1310,
    "stops": ["ORD"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "309",
      "duration": 840,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["KL"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "6014",
    "price": 2343,
    "duration": 762,
    "stops": ["AMS"],
    "returnOptions": [{
      "airline": ["KL"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "1230",
      "duration": 758,
      "stops": ["AMS"]
    }]
  }, {
    "airline": ["BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "48",
    "price": 2355,
    "duration": 705,
    "stops": ["LHR"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "315",
      "duration": 725,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "52",
    "price": 2355,
    "duration": 740,
    "stops": ["LHR"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "315",
      "duration": 725,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "48",
    "price": 2355,
    "duration": 785,
    "stops": ["LHR"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "315",
      "duration": 725,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "48",
    "price": 2355,
    "duration": 705,
    "stops": ["LHR"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "309",
      "duration": 840,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "52",
    "price": 2355,
    "duration": 855,
    "stops": ["LHR"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "315",
      "duration": 725,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "52",
    "price": 2355,
    "duration": 740,
    "stops": ["LHR"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "309",
      "duration": 840,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "48",
    "price": 2355,
    "duration": 785,
    "stops": ["LHR"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "309",
      "duration": 840,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "48",
    "price": 2355,
    "duration": 950,
    "stops": ["LHR"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "315",
      "duration": 725,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "52",
    "price": 2355,
    "duration": 855,
    "stops": ["LHR"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "309",
      "duration": 840,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "52",
    "price": 2355,
    "duration": 1020,
    "stops": ["LHR"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "315",
      "duration": 725,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "48",
    "price": 2355,
    "duration": 950,
    "stops": ["LHR"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "309",
      "duration": 840,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["BA"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "52",
    "price": 2355,
    "duration": 1100,
    "stops": ["LHR"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "315",
      "duration": 725,
      "stops": ["LHR"]
    }]
  }, {
    "airline": ["AB"],
    "arrivalStation": "CDG",
    "departureStation": "SEA",
    "flightNumber": "48",
    "price": 2355,
    "duration": 1120,
    "stops": ["LHR"],
    "returnOptions": [{
      "airline": ["BA"],
      "arrivalStation": "SEA",
      "departureStation": "CDG",
      "flightNumber": "315",
      "duration": 725,
      "stops": ["LHR"]
    }]
  }];

// This sorts by price but they are not in alphabetical order
dom.innerHTML = JSON.stringify(sortByProp(flights, 'airline', 'price'), null, 2);

  <body>
    <pre id="data"></pre>
  </body>

Link to plunkr code

And the answer from the duplicate seems to work -> https://jsfiddle.net/qwjm4e02/ — adeneo, Aug 19 '16 at 19:05

score 2 · Accepted Answer · answered Aug 19 '16 at 19:08

2

You could use Array#sort with a callback like this:

flights.sort(function (a, b) {
    return a.price - b.price || a.airline[0].localeCompare(b.airline[0]);
});

answered Aug 19 '16 at 19:08

Nina Scholz

376,160
25
347
392

do you have any idea for the case we have an unknown size array for properties. here just price and airline. what about price and airline and 3 more? – m.eslampnah Aug 03 '20 at 11:45

JavaScript sort array of objects by property's array value

1 Answers1