javascript : Sort a subset of an array (created by a filter)

SebastienChemouny
June 25, 2023
274 views
3 votes
5 Answers

I’m trying to sort only a subset of an array, the subset is a filtered version of that array, and I need the whole array (with the subset sorted ) as a result.

Here is the main array :

var data = [
  { name: "Cccc", sortCriteria: 1 },
  { name: "Bbbb", sortCriteria: 1 },
  { name: "Dddd", sortCriteria: 0 },
  { name: "Eeee", sortCriteria: 1 },
  { name: "Ffff", sortCriteria: 0 },
];

The sort criteria is used to filter the array :

var data2 = data.filter(function (attribute) {
  return attribute.sortCriteria == 1;
});

Finally i’m sorting the filtered array :

var data3 = data2.sort(function (a, b) {
  var aname = a.name.toLowerCase();
  var bname = b.name.toLowerCase();
  if (aname < bname) {
    return -1;
  }
  if (aname > bname) {
    return 1;
  }
});

Every step works but data2 & data3 are subset only (i need the wole array) and data is obviously not sorted.

My result should be :

Bbbb
Cccc
Dddd
Eeee
Ffff

Any idea how that can be done using ecmascript 5 (the order can be random, this is a example) ?

Edit : the following question doesnt address my issue because it’s not ecma5 compliant.

Javascript – Sort the elements of the array without changing positions of certain elements using Array.sort()

Answers

var data = [{
    name: "Cccc",
    sortCriteria: 1
  }, {
    name: "Bbbb",
    sortCriteria: 1
  },
  {
    name: "Dddd",
    sortCriteria: 0
  }, {
    name: "Eeee",
    sortCriteria: 1
  }, {
    name: "Ffff",
    sortCriteria: 0
  }
];

let sortChar = data.sort((a, b) => a.name.localeCompare(b.name));
console.log(sortChar);

You can store the original index of each element while filtering manually, then use those indexes to update the positions of the objects back in the original array.

var data = [{name : "Cccc", sortCriteria : 1}, {name : "Bbbb", sortCriteria : 1}, {name : "Dddd", sortCriteria : 0}, {name : "Eeee", sortCriteria : 1}, {name : "Ffff", sortCriteria : 0}];
var filtered = [], origIdx = [];
for (var i = 0; i < data.length; i++)
  if (data[i].sortCriteria === 1) 
    filtered.push(data[i]), origIdx.push(i);
filtered.sort(function(a, b){return a.name.toLowerCase().localeCompare(b.name.toLowerCase())});
for (var i = 0; i < filtered.length; i++)
  data[origIdx[i]] = filtered[i];
console.log(data);

First you have problem with your test data. If it’s sorted without even sortCriteria in mind the result will be the same. So I’ve changed the test data to make it more obvious.

We remember indices of items with sortCriteria, sort them and push back to data at remembered indices.

NOTICE: changed Cccc‘s sortCriteria to 0 so it would be clear that it’s not sorted and stays at index 0, also Bbbb moved to the end so it should appear before `Eeee’ after the sorting:

var data = [{name : "Cccc", sortCriteria : 0},  
{name : "Dddd", sortCriteria : 0}, {name : "Eeee", sortCriteria : 1}, {name : "Ffff", sortCriteria : 0}, {name : "Bbbb", sortCriteria : 1}];

var items = [], idxs = [];
data.forEach(function(item, idx){
  item.sortCriteria && items.push(item) && idxs.push(idx);
});

items.sort(function(a, b){
  a = a.name.toLowerCase();
  b = b.name.toLowerCase();
  return a > b ? 1 : a < b ? -1 : 0;
});

var i = 0;
items.forEach(function(item){ 
  data[idxs[i++]] = item;
});

//not es2015, just logging
console.log(data.map(({name})=>name));

And a benchmark with test data x 15000.
When tested noticed that Nina’s solution’s performance drops exponentially.

<script benchmark data-count="1">

    var chunk = [{ name: "Cccc", sortCriteria: 1 }, { name: "Bbbb", sortCriteria: 1 }, { name: "Dddd", sortCriteria: 0 }, { name: "Eeee", sortCriteria: 1 }, { name: "Ffff", sortCriteria: 0 }];
    var data = [];
    for (let i = 0; i < 15000; i++) {
        data = data.concat(chunk);
    }

    // @benchmark Nina's solution

    var data2 = data.filter(function (item) {
        return item.sortCriteria === 1;
    }),
        indices = data2
            .map(function (_, i) {
                return i;
            })
            .sort(function (a, b) {
                var aname = data2[a].name.toLowerCase(),
                    bname = data2[b].name.toLowerCase();

                if (aname < bname) return -1;
                if (aname > bname) return 1;
                return 0;
            }),
        sorted = data.map(function (item) {
            return item.sortCriteria === 1
                ? data2[indices.shift()]
                : item;
        });
    sorted;    

    // @benchmark Alexander's solution

    var items = [], idxs = [];
    data.forEach(function(item, idx){
      item.sortCriteria && items.push(item) && idxs.push(idx);
    });

    items.sort(function(a, b){
      a = a.name.toLowerCase();
      b = b.name.toLowerCase();
      return a > b ? 1 : a < b ? -1 : 0;
    });

    var idx = 0;
    items.forEach(function(item){ 
      data[idxs[idx++]] = item;
    });

    data;

</script>
<script src="https://cdn.jsdelivr.net/gh/silentmantra/benchmark/loader.js"></script>

ES6+ version:

var data = [{name : "Cccc", sortCriteria : 0},  
{name : "Dddd", sortCriteria : 0}, {name : "Eeee", sortCriteria : 1}, {name : "Ffff", sortCriteria : 0}, {name : "Bbbb", sortCriteria : 1}];

const items = [], idxs = [];
data.forEach((item, idx) => item.sortCriteria && items.push(item) && idxs.push(idx));

items.sort((a, b) => {
  a = a.name.toLowerCase();
  b = b.name.toLowerCase();
  return a > b ? 1 : a < b ? -1 : 0;
});
let i = 0;
items.forEach(item => data[idxs[i++]] = item);

console.log(data.map(({name})=>name));

- JanTuro
- June 25, 2023 at 7:10 pm
- 0 votes
0
Just add if (!a.sortCriteria || !b.sortCriteria) return 0; at the beginning of the sorting function to avoid sorting elements with sortCriteria 0. (Array.prototype.sort() sorts in-place, so there is no need to var data2 = data.sort(...) – data and data2 is the same array here.
var data = [ { name: "Cccc", sortCriteria: 1 }, { name: "Bbbb", sortCriteria: 1 }, { name: "Dddd", sortCriteria: 0 }, { name: "Eeee", sortCriteria: 1 }, { name: "Ffff", sortCriteria: 0 }, ]; data.sort(function(a, b) { if (!a.sortCriteria || !b.sortCriteria) return 0; var aname = a.name.toLowerCase(); var bname = b.name.toLowerCase(); if (aname < bname) return -1; if (aname > bname) return 1; return 0; }); console.log(data);
Login or Signup to reply.

You could get an array of the items fro sorting and their indices and sort the indices an map a new array with either not sorted items or sorted items.

var data = [{ name: "Cccc", sortCriteria: 1 }, { name: "Bbbb", sortCriteria: 1 }, { name: "Dddd", sortCriteria: 0 }, { name: "Eeee", sortCriteria: 1 }, { name: "Ffff", sortCriteria: 0 }],
    data2 = data.filter(function (item) {
        return item.sortCriteria === 1;
    }),
    indices = data2
        .map(function (_, i) {
            return i;
        })
        .sort(function (a, b) {
            var aname = data2[a].name.toLowerCase(),
                bname = data2[b].name.toLowerCase();

            if (aname < bname) return -1;
            if (aname > bname) return 1;
            return 0;
        }),
    index = 0,
    sorted = data.map(function (item) {
        return item.sortCriteria === 1
            ? data2[indices[index++]]
            : item;
    });

console.log(sorted);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Please signup or login to give your own answer.

Click here to cancel reply.