Arrange the array based on the key values

Question

Arrange the array based on the key values

I am currently working with a function that sorts by name and an array containing value/key pairs.

I am trying to figure out how I can dynamically pass the key on which the sort is being performed, so that I can call the same function each time with different keys:

var arr = [{name:'bob', artist:'rudy'},
           {name:'johhny', artist:'drusko'},
           {name:'tiff', artist:'needell'},
           {name:'top', artist:'gear'}];

sort(arr, 'name');   //sort by name
sort(arr, 'artist'); //sort by artist

function sort(arr) {
  arr.sort(function(a, b) {
    var nameA=a.name.toLowerCase(), nameB=b.name.toLowerCase();
    if (nameA < nameB) //sort string ascending
      return -1;
    if (nameA > nameB)
      return 1;
    return 0; //default return value (no sorting)
   });          
}

javascript arrays sorting tags

Answer 1

Answer №1

CustomArray.prototype.sortByKey = function(key){
    this.sort(function(x, y){
        if(x[key] < y[key]){
            return -1;
        }else if(x[key] > y[key]){
            return 1;
        }
        return 0;
    });
}

var customArr = [{name:'Alice', age:32},{name:'Bob', age:25},{name:'Eve', age:40},{name:'Charlie', age:30}];

customArr.sortByKey("name");
customArr.sortByKey("age");

Answer 2

CustomArray.prototype.sortByKey = function(key){
    this.sort(function(x, y){
        if(x[key] < y[key]){
            return -1;
        }else if(x[key] > y[key]){
            return 1;
        }
        return 0;
    });
}

var customArr = [{name:'Alice', age:32},{name:'Bob', age:25},{name:'Eve', age:40},{name:'Charlie', age:30}];

customArr.sortByKey("name");
customArr.sortByKey("age");

Answer 3

Answer №2

[updated on 2020/08/14] This answer has been revised and simplified due to its outdated nature and lack of quality.

Develop a function that generates a sorting lambda (the callback for Array.prototype.sort that handles the sorting logic). This function should accept parameters such as the key name, the type of sorting (string - case sensitive or not, or numeric), and the sorting order (ascending or descending). The lambda utilizes the provided parameter values (closure) to determine the sorting mechanism.

const log = (...strs) => 
  document.querySelector("pre").textContent += `\n${strs.join("\n")}`;
const showSortedValues = (arr, key) => 
  ` => ${arr.reduce((acc, val) => ([...acc, val[key]]), [])}`;
  
// function to create sort lambda based on key, type, and order
const sortOnKey = (key, string, desc) => {
  const caseInsensitive = string && string === "CI";
  return (a, b) => {
    a = caseInsensitive ? a[key].toLowerCase() : a[key];
    b = caseInsensitive ? b[key].toLowerCase() : b[key];
    if (string) {
      return desc ? b.localeCompare(a) : a.localeCompare(b);
    }
    return desc ? b - a : a - b;
  }
};

// a few examples of sorting
const onNameStringAscendingCaseSensitive = 
  getTestArray().sort( sortOnKey("name", true) );
const onNameStringAscendingCaseInsensitive = 
  getTestArray().sort( sortOnKey("name", "CI", true) );
const onValueNumericDescending = 
  getTestArray().sort( sortOnKey("value", false, true) );

// display sorted values
log(`*key = name, string ascending case sensitive`,
  showSortedValues(onNameStringAscendingCaseSensitive, "name")
);

log(`\n*key = name, string descending case insensitive`,
  showSortedValues(onNameStringAscendingCaseInsensitive, "name")
);

log(`\n*key = value, numeric desc`, 
  showSortedValues(onValueNumericDescending, "value")
);

function getTestArray() {
  return [{
    name: 'Bob',
    artist: 'Rudy',
    value: 23,
  }, {
    name: 'John',
    artist: 'Drusko',
    value: 123,
  }, {
    name: 'Tiff',
    artist: 'Needell',
    value: 1123,
  }, {
    name: 'Top',
    artist: 'Gear',
    value: 11123,
  }, {
    name: 'john',
    artist: 'Johanson',
    value: 12,
  }, ];
}

<pre></pre>

Answer 4

[updated on 2020/08/14] This answer has been revised and simplified due to its outdated nature and lack of quality.

Develop a function that generates a sorting lambda (the callback for Array.prototype.sort that handles the sorting logic). This function should accept parameters such as the key name, the type of sorting (string - case sensitive or not, or numeric), and the sorting order (ascending or descending). The lambda utilizes the provided parameter values (closure) to determine the sorting mechanism.

const log = (...strs) => 
  document.querySelector("pre").textContent += `\n${strs.join("\n")}`;
const showSortedValues = (arr, key) => 
  ` => ${arr.reduce((acc, val) => ([...acc, val[key]]), [])}`;
  
// function to create sort lambda based on key, type, and order
const sortOnKey = (key, string, desc) => {
  const caseInsensitive = string && string === "CI";
  return (a, b) => {
    a = caseInsensitive ? a[key].toLowerCase() : a[key];
    b = caseInsensitive ? b[key].toLowerCase() : b[key];
    if (string) {
      return desc ? b.localeCompare(a) : a.localeCompare(b);
    }
    return desc ? b - a : a - b;
  }
};

// a few examples of sorting
const onNameStringAscendingCaseSensitive = 
  getTestArray().sort( sortOnKey("name", true) );
const onNameStringAscendingCaseInsensitive = 
  getTestArray().sort( sortOnKey("name", "CI", true) );
const onValueNumericDescending = 
  getTestArray().sort( sortOnKey("value", false, true) );

// display sorted values
log(`*key = name, string ascending case sensitive`,
  showSortedValues(onNameStringAscendingCaseSensitive, "name")
);

log(`\n*key = name, string descending case insensitive`,
  showSortedValues(onNameStringAscendingCaseInsensitive, "name")
);

log(`\n*key = value, numeric desc`, 
  showSortedValues(onValueNumericDescending, "value")
);

function getTestArray() {
  return [{
    name: 'Bob',
    artist: 'Rudy',
    value: 23,
  }, {
    name: 'John',
    artist: 'Drusko',
    value: 123,
  }, {
    name: 'Tiff',
    artist: 'Needell',
    value: 1123,
  }, {
    name: 'Top',
    artist: 'Gear',
    value: 11123,
  }, {
    name: 'john',
    artist: 'Johanson',
    value: 12,
  }, ];
}

<pre></pre>

Answer 5

Answer №3

const sortByKey = (key) => {
  return function(a,b) {
    if (a[key] > b[key]) return 1;
    if (a[key] < b[key]) return -1;
    return 0;
  }
}

arrayOfItems.sort(sortByKey('name'));

Answer 6

const sortByKey = (key) => {
  return function(a,b) {
    if (a[key] > b[key]) return 1;
    if (a[key] < b[key]) return -1;
    return 0;
  }
}

arrayOfItems.sort(sortByKey('name'));

Answer 7

Answer №4

Simplify your daily tasks by implementing a closure

Check out a live example here

var filter = 'name', //sort by name
data = [{name:'bob', artist:'rudy'},{name:'johhny', artist:'drusko'},{name:'tiff', artist:'needell'},{name:'top', artist:'gear'}];; 

var compare = function (filter) {
    return function (a,b) { //closure
        var a = a[filter],
            b = b[filter];

        if (a < b) {
            return -1;
        }else if (a > b) {
            return 1;
        } else {
            return 0;
        }
    };
};

filter = compare(filter); //set filter

console.log(data.sort(filter));

Answer 8

Simplify your daily tasks by implementing a closure

Check out a live example here

var filter = 'name', //sort by name
data = [{name:'bob', artist:'rudy'},{name:'johhny', artist:'drusko'},{name:'tiff', artist:'needell'},{name:'top', artist:'gear'}];; 

var compare = function (filter) {
    return function (a,b) { //closure
        var a = a[filter],
            b = b[filter];

        if (a < b) {
            return -1;
        }else if (a > b) {
            return 1;
        } else {
            return 0;
        }
    };
};

filter = compare(filter); //set filter

console.log(data.sort(filter));

Answer 9

Answer №5

After reviewing all the solutions provided, I devised my own approach that is compatible across various browsers. The solution that was originally accepted does not function properly in Internet Explorer or Safari. Additionally, the other proposed solutions do not support sorting in descending order.

/*! FUNCTION: ARRAY.KEYSORT(); **/
Array.prototype.keySort = function(key, desc){
  this.sort(function(a, b) {
    var result = desc ? (a[key] < b[key]) : (a[key] > b[key]);
    return result ? 1 : -1;
  });
  return this;
}

var arr = [{name:'bob', artist:'rudy'}, {name:'johhny', artist:'drusko'}, {name:'tiff', artist:'needell'}, {name:'top', artist:'gear'}];
arr.keySort('artist');
arr.keySort('artist', true);

Answer 10

After reviewing all the solutions provided, I devised my own approach that is compatible across various browsers. The solution that was originally accepted does not function properly in Internet Explorer or Safari. Additionally, the other proposed solutions do not support sorting in descending order.

/*! FUNCTION: ARRAY.KEYSORT(); **/
Array.prototype.keySort = function(key, desc){
  this.sort(function(a, b) {
    var result = desc ? (a[key] < b[key]) : (a[key] > b[key]);
    return result ? 1 : -1;
  });
  return this;
}

var arr = [{name:'bob', artist:'rudy'}, {name:'johhny', artist:'drusko'}, {name:'tiff', artist:'needell'}, {name:'top', artist:'gear'}];
arr.keySort('artist');
arr.keySort('artist', true);

Arrange the array based on the key values

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Troubleshooting Problem with Padding in ion-content for Ionic Angular

What's the quickest method for duplicating an array?

Select a picture at random from a directory

Issue with nextJS/Firebase database while experimenting with enabling web frameworks

The TransferList component in Material UI does not update its state based on props when using the useState

Are the loops malfunctioning or is it a problem with the array?

Iterate over the array elements in React by using Hooks on click

How can we efficiently determine if any of the keys in an array of objects contains a value that is present in another array of arrays object?

Exploring the world of mocking and stubbing in protractor

Using D3.js to plot data points on a topojson map's coordinates

Tips for unit testing an Angular Service that is primarily responsible for redirecting to an external page from the application

Unable to add key/value pair to object in Node

Tips for maintaining consistent header and footer while developing the front end using JavaScript

Passing PHP Variables Between Pages

What is the best way to bypass array values in PHP?

Sticky box fails to maintain position as header scrolls

How to download a file using AJAX in Laravel?

Retrieving information from an unfamiliar encoding document

How to Use Discord.js v13 to Make an Announcement in a Specific Channel

The default zoom setting for ng-map is overly magnified when paired with the zoom-to-include-markers="true" feature