Sorting arrays with nested objects in JavaScript

Question

Sorting arrays with nested objects in JavaScript

I am facing a challenge with sorting an array of objects in two specific ways:

First, I need to sort the objects by alphabetical order using the country name.
Then, inside each country, I have to arrange the scores in ascending order.

Below you can find the original array and the code snippet I attempted to use for this task.

//Array Structure
let allCountryScores=[
   {
      name: "Ethiopia", 
      scores:  [ {n: "Sub", s: 9990}, {n: "lucy", s: "4134234"}, {n: "DWH", s: 9999},  {n: "Hanif", s: 999999999} ]
    },     

]

//Code Attempt

//Sorting countries alphabetically
let orderedCountries = allCountryScores.sort((a, b) => a.name.localeCompare(b.name));
//Sorting scores numerically within each country
let orderedScores = orderedCountries.forEach(country => { country.scores.sort((a, b) => a.s > b.s) });
console.log(orderedScores);

When I check my console, it returns 'undefined'. Can anyone help me identify what might be causing this issue in my code?

javascript arrays sorting javascript-objects

Answer 1

Answer №1

There are a couple of issues to address:

The use of forEach doesn't return any value, so there is no need for an assignment in that line. Simply remove it. Additionally, the assignment on the previous line isn't necessary either as sort modifies the array directly.
The sorting logic for scores is incorrect. The expression a.s > b.s does not provide the expected result for the callback function of sort. Instead, you should use a.s - b.s to return the correct comparison result.

To resolve these issues and assuming modification of the original arrays is acceptable, here is an updated version:

//Sort countries alphabetically
allCountryScores.sort((a, b) => a.name.localeCompare(b.name));
//Sort scores numerically  
allCountryScores.forEach(country => { country.scores.sort((a, b) => a.s - b.s) });
console.log(allCountryScores);

If creating new arrays with new objects containing sorted arrays is desired, you can achieve it like this:

const countries =
    allCountryScores.map(({name, scores}) => {
        // Copy and sort the scores
        scores = [...scores].sort((a, b) => a.s - b.s);
        // Return a new object
        return {name, scores};
    })
    // Sort the new array of countries
    .sort((a, b) => a.name.localeCompare(b.name));

Answer 2

There are a couple of issues to address:

The use of forEach doesn't return any value, so there is no need for an assignment in that line. Simply remove it. Additionally, the assignment on the previous line isn't necessary either as sort modifies the array directly.
The sorting logic for scores is incorrect. The expression a.s > b.s does not provide the expected result for the callback function of sort. Instead, you should use a.s - b.s to return the correct comparison result.

To resolve these issues and assuming modification of the original arrays is acceptable, here is an updated version:

//Sort countries alphabetically
allCountryScores.sort((a, b) => a.name.localeCompare(b.name));
//Sort scores numerically  
allCountryScores.forEach(country => { country.scores.sort((a, b) => a.s - b.s) });
console.log(allCountryScores);

If creating new arrays with new objects containing sorted arrays is desired, you can achieve it like this:

const countries =
    allCountryScores.map(({name, scores}) => {
        // Copy and sort the scores
        scores = [...scores].sort((a, b) => a.s - b.s);
        // Return a new object
        return {name, scores};
    })
    // Sort the new array of countries
    .sort((a, b) => a.name.localeCompare(b.name));

Sorting arrays with nested objects in JavaScript

Answer №1

Similar questions

I have a JavaScript code that smoothly scrolls to different id's on a webpage, but I need assistance in adding an exception for a particular id

Wrapping an array into a string in Laravel: a step-by-step guide

What techniques can I use to generate code dynamically for transferring an object to a different Node process?

What could be preventing the webpack dev server from launching my express server?

Issue with passing multiple promises to $q.all function

jquery accordion set to collapse by default when the page first loads

The React.js .map function encountered an error while trying to map the results from Firebase

"Utilizing Vue.js for frontend, this app utilizes axios from the client side, rather than

Execute a database query to search for patterns using Regular Expressions within the

Using Javascript, populate an array with Enum variable values

Utilizing Mongoose Schema for CSV Import

Creating a personalized aggregation function in a MySQL query

Combine the content from several URLs listed in an array using either the .get or .ajax method

Combining video.js and vue.js for seamless integration

Simple method to retrieve the ID of an input field within a form using jQuery selectors

Stopping the spread of popup alerts: A comprehensive guide

Common Mistakes when Working with Java Character Arrays

Search a location database using the user's current coordinates

What order should jquery files be included in?

Download button on Rshiny platform for collecting numerous files from different sources