Arrange array of objects with unspecified and non-existent values

Question

Arrange array of objects with unspecified and non-existent values

Is there a way to sort an array of objects in JavaScript that contains null and undefined values? The goal is to display items with a "jobTitle" property first, sorted by rating, followed by items without a "jobTitle" also sorted by rating. Sample Data:

data = [
  {name: 'John', rating: null},
  {name: 'Ethel', rating: 1.34, jobTitle: 'engineer'},
  {name: 'Abba', rating: 5.44},
  {name: 'Harry', rating: 0.44, jobTitle: 'plumber'}
]

Once the data is sorted by jobTitle and then by rating, it should look like this:

[
  {name: 'Ethel', rating: 1.34, jobTitle: 'engineer'},
  {name: 'Harry', rating: 0.44, jobTitle: 'plumber'},
  {name: 'Abba', rating: 5.44},
  {name: 'John', rating: null}
]

I have attempted various methods such as:

data.sort(function (a, b) {
  var x = a[key]; var y = b[key];
  return ((x > y) ? -1 : ((x < y) ? 1 : 0));
});

However, these approaches did not handle undefined and null values properly. I'm looking for a solution that does not involve creating new arrays or merging data, ideally completing the task within a single method.

EDIT

The desired outcome is to first list items with jobTitles sorted by their ratings AND then list those without jobTitles, also sorted by rating.

javascript arrays sorting

Answer 1

Answer №1

To ensure the desired outcome, it is important to evaluate each condition individually and provide the appropriate response for each scenario.

data = [
  {name: 'John', rating: null},
  {name: 'Ethel', rating: 1.34, jobTitle: 'engineer'},
  {name: 'Abba', rating: 5.44},
  {name: 'Harry', rating: 0.44, jobTitle: 'plumber'}
];

data.sort((a, b) => {
  if(a.jobTitle && b.jobTitle) {
    return (b.rating || 0) - (a.rating || 0);
  } else if(a.jobTitle || b.jobTitle) {
    return !(a.jobTitle) - !(b.jobTitle)
  } else  {
    return (b.rating || 0) - (a.rating || 0);
  }
});
console.log(data)

Answer 2

To ensure the desired outcome, it is important to evaluate each condition individually and provide the appropriate response for each scenario.

data = [
  {name: 'John', rating: null},
  {name: 'Ethel', rating: 1.34, jobTitle: 'engineer'},
  {name: 'Abba', rating: 5.44},
  {name: 'Harry', rating: 0.44, jobTitle: 'plumber'}
];

data.sort((a, b) => {
  if(a.jobTitle && b.jobTitle) {
    return (b.rating || 0) - (a.rating || 0);
  } else if(a.jobTitle || b.jobTitle) {
    return !(a.jobTitle) - !(b.jobTitle)
  } else  {
    return (b.rating || 0) - (a.rating || 0);
  }
});
console.log(data)

Answer 3

Answer №2

If you're looking to optimize your code, I suggest breaking it down into two separate sorts and executing them in a sequence.

let categories = [
  {name: 'John', rating: null},
  {name: 'Peter', rating: null},
  {name: 'Harry', rating: 0.44, jobTitle: 'plumber'},
  {name: 'Harry', rating: 0.50, jobTitle: 'plumber'},
  {name: 'Anderson', rating: 1.34, jobTitle: 'mascot'},
  {name: 'Ethel', rating: 1.34, jobTitle: 'engineer'},
  {name: 'Abba', rating: 5.44}
]
categories.sort(sortByRating);
categories.sort(sortByJobTitle);
console.log(categories)

function sortByJobTitle(a, b){
  if( typeof a.jobTitle === 'undefined' && typeof a.jobTitle === 'undefined' ) return 0;
  if( typeof b.jobTitle === 'undefined' ) return -1;
  if( typeof a.jobTitle === 'undefined' ) return 1;
  
  let titleA = a.jobTitle.toLowerCase();
  let titleB = b.jobTitle.toLowerCase();
  
  if( titleA === titleB ) return 0;
  if( titleA > titleB ) return 1;
  else return -1;
}

function sortByRating(a, b) {
  // This comparison works for null because it gets cast to 0
  if( a.rating === b.rating ) return 0;
  if( a.rating > b.rating ) return -1;
  else return 1;
}

Answer 4

If you're looking to optimize your code, I suggest breaking it down into two separate sorts and executing them in a sequence.

let categories = [
  {name: 'John', rating: null},
  {name: 'Peter', rating: null},
  {name: 'Harry', rating: 0.44, jobTitle: 'plumber'},
  {name: 'Harry', rating: 0.50, jobTitle: 'plumber'},
  {name: 'Anderson', rating: 1.34, jobTitle: 'mascot'},
  {name: 'Ethel', rating: 1.34, jobTitle: 'engineer'},
  {name: 'Abba', rating: 5.44}
]
categories.sort(sortByRating);
categories.sort(sortByJobTitle);
console.log(categories)

function sortByJobTitle(a, b){
  if( typeof a.jobTitle === 'undefined' && typeof a.jobTitle === 'undefined' ) return 0;
  if( typeof b.jobTitle === 'undefined' ) return -1;
  if( typeof a.jobTitle === 'undefined' ) return 1;
  
  let titleA = a.jobTitle.toLowerCase();
  let titleB = b.jobTitle.toLowerCase();
  
  if( titleA === titleB ) return 0;
  if( titleA > titleB ) return 1;
  else return -1;
}

function sortByRating(a, b) {
  // This comparison works for null because it gets cast to 0
  if( a.rating === b.rating ) return 0;
  if( a.rating > b.rating ) return -1;
  else return 1;
}

Answer 5

Answer №3

When implementing your sort function, it's important to consider how to handle cases where a value is either null or undefined. In such scenarios, you can opt to return 1, ensuring that the element is sorted to the end of the array. Furthermore, it's worth noting that you are sorting an array in this context, not a JSON string. Remember that a JSON string cannot include the undefined primitive value, although this is permissible in valid JavaScript syntax.

data.sort(function (a, b) {
  var x = a[key];
  var y = b[key];
  if (x === null || x === undefined) {
    return 1;
  }
  return y - x;
});

Answer 6

When implementing your sort function, it's important to consider how to handle cases where a value is either null or undefined. In such scenarios, you can opt to return 1, ensuring that the element is sorted to the end of the array. Furthermore, it's worth noting that you are sorting an array in this context, not a JSON string. Remember that a JSON string cannot include the undefined primitive value, although this is permissible in valid JavaScript syntax.

data.sort(function (a, b) {
  var x = a[key];
  var y = b[key];
  if (x === null || x === undefined) {
    return 1;
  }
  return y - x;
});

Arrange array of objects with unspecified and non-existent values

Answer №1

Answer №2

Answer №3

Similar questions

Issue with Vue JS Components: Button function not working on second click with @click

Troubles with retrieving Array data for a JavaScript column chart

Incorporating Keyboard Features into Buttons

Utilizing Threejs to implement dynamic text labels

Issues with jQuery spinner not currently active

Having trouble drawing over buttons in HTML5 Canvas?

Utilizing AJAX in jQuery Mobile for Collapsible Content

Transferring data from a text area to a table with AngularJS

Show a compact graphic in the upper-right-hand corner

Efficiently Filtering User Input and Other Things

Display words on screen and then alter hue using HTML and CSS

Position the caret after adding a new element in a content-editable div

Guide on populating a textbox with values through Ajax or Jquery

I'm experiencing a flickering issue with my carousel when it reaches over 10,000 pixels during animation. Could this be related to a jQuery problem

Looking for a specialized search function that handles special characters and numbers

Encountered an error while attempting to load resource in Node.js

Is it possible to iterate through HTML elements without relying on forEach()?

Utilize fixed values in type declaration

Sending Array Data from Controller to Factory in AngularJS

A guide to sorting an object with integer keys by its values using JavaScript