How to sort a map by value in JavaScript?

JavascriptSortingDictionary

Javascript Problem Overview


How to sort this map by value?

var map = new Map();
map.set('orange', 10);
map.set('apple', 5);
map.set('banana', 20);
map.set('cherry', 13);

Javascript Solutions


Solution 1 - Javascript

const myMap = new Map();
myMap.set("a",3);
myMap.set("c",4);
myMap.set("b",1);
myMap.set("d",2);

// sort by value
const mapSort1 = new Map([...myMap.entries()].sort((a, b) => b[1] - a[1]));
console.log(mapSort1);
// Map(4) {"c" => 4, "a" => 3, "d" => 2, "b" => 1}

const mapSort2 = new Map([...myMap.entries()].sort((a, b) => a[1] - b[1]));
console.log(mapSort2);
// Map(4) {"b" => 1, "d" => 2, "a" => 3, "c" => 4}

// sort by key
const mapSort3 = new Map([...myMap.entries()].sort());
console.log(mapSort3);
// Map(4) {"a" => 3, "b" => 1, "c" => 4, "d" => 2}

const mapSort4 = new Map([...myMap.entries()].reverse());
console.log(mapSort4);
// Map(4) {"d" => 2, "b" => 1, "c" => 4, "a" => 3}

Solution 2 - Javascript

Yo could take a different approach and change Symbol.iterator of Map.prototype[@@iterator]() for a custom sorted result.

var map = new Map();

map.set("orange", 10);
map.set("apple", 5);
map.set("banana", 20);
map.set("cherry", 13);

map[Symbol.iterator] = function* () {
    yield* [...this.entries()].sort((a, b) => a[1] - b[1]);
}

for (let [key, value] of map) {     // get data sorted
    console.log(key + ' ' + value);
}

console.log([...map]);              // sorted order
console.log([...map.entries()]);    // original insertation order

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

Solution 3 - Javascript

You can shorten the function and use this in ES6- using arrow function (lambda)

 let m2= new Map([...m.entries()].sort((a,b) => b[1] - a[1]))

Solution 4 - Javascript

In ES6 you can do it like this: (assume your Map object is m).

[...m].map(e =>{ return e[1];}).slice().sort(function(a, b) {
  return a - b; 
});

the spread operator turns a Map object into an array, then takes out the second element of each subarray to build a new array, then sort it. If you want to sort in descending order just replace a - b with b - a.

Solution 5 - Javascript

You can use list maps instead of map only. Try this:

var yourListMaps = [];
var a = {quantity: 10, otherAttr: 'tmp1'};
var b = {quantity: 20, otherAttr: 'tmp2'};
var c = {quantity: 30, otherAttr: 'tmp3'};
yourListMaps.push(a);
yourListMaps.push(b);
yourListMaps.push(c);

And if you want to sort by quantity, you can:

// Sort c > b > a
yourListMaps.sort(function(a,b){
    return b.quantity - a.quantity;
});

or

// Sort a > b > c
yourListMaps.sort(function(a,b){
    return a.quantity - b.quantity;
});

Solution 6 - Javascript

To sort a map object use the below code.

const map = new Map();
map.set("key","value");
map.set("key","value");

const object = Object.keys(map.sort().reduce((a,b) => (a[k] = map[a], b), {});

console.log(object);

//This will work to sort a map by key.

Solution 7 - Javascript

I also wanted to sort a Map by value but my key is a number and value is a string. (Map), and wanted to do it using TypeScript.

This is what worked for me, using localeCompare

let json = [
    {
        "key": 2952,
        "value": "Sample Text"
    },
    {
        "key": 2961,
        "value": "Sample Text 1"
    },
    {
        "key": 2962,
        "value": "1Sample Text"
    },
    {
        "key": 2987,
        "value": "3Sample Text"
    },
    {
        "key": 2988,
        "value": "#Sample Text"
    },
    {
        "key": 4585,
        "value": "Ö Sample Text"
    },
    {
        "key": 4594,
        "value": "@Sample Text"
    }
]

let myMap = new Map(Object.entries(json));

myMap = new Map([...myMap.entries()].sort((a, b) => a[1].value.localeCompare(b[1].value)));

myMap.forEach((x) => {
    console.log(x.value)
})

Solution 8 - Javascript

To Sort Object simply use

const sortedObject = mapObject.sort((a,b)=>return b.value - a.value) 

Solution 9 - Javascript

There are several valid answers here but I think the "ordered map" aspect complicates and confuses things unnecessarily.

Assuming it is sufficient to get a list of the keys in the map sorted by value, rather than a map whose entries are sorted by value, then something like this works:

var map = {
  orange: 10,
  apple: 5,
  banana: 20,
  cherry: 13
}

var sorted_keys = Object.keys(map).sort(function(a,b) { return map[a] - map[b]; });

which yields:

["apple", "orange", "cherry", "banana"]

This is a little less elegant if you actually want to iterate over the map entries (now you need to iterate over the array of sorted keys and fetch the values instead) but:

  1. This logic is much easier for my simple mind to follow and to remember.

  2. There's a pretty common use case for "sort this map by value" in which you actually want the sorted list of keys: using a map to keep a tally. (E.g., iterating over the words in a file using a map to keep try of how often each word appears then sorting that map to get a list of words by frequency.)

For the general case in which the values in the map aren't necessarily numeric, replace the comparator function (the function passed to Object.keys(map).sort) with something like:

function(a, b) {
  return (a < b) ? -1 : ( (a > b) ? 1 : 0 );
}

(which is essentially:

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

but using the ternary (? :) operator.)

But bear in mind that the behavior of JavaScript's < and > operators is sometimes a little counter-intuitive with mixed types so depending on the values in your map you may want to include explicit type-casting logic in your comparator.

Solution 10 - Javascript

let map = new Map();
map.set("apple", 1);
map.set("banana", 5);
map.set("mango", 4);
map.set("orange", 9);

let sorted = Object.keys(map).sort((a,b) => {
    return map[b] - map[a];
});

console.log(sorted);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionchenxinlongView Question on Stackoverflow
Solution 1 - JavascriptMiroslav SavovskiView Answer on Stackoverflow
Solution 2 - JavascriptNina ScholzView Answer on Stackoverflow
Solution 3 - JavascriptApoorva AmbhojView Answer on Stackoverflow
Solution 4 - JavascriptnewguyView Answer on Stackoverflow
Solution 5 - JavascriptNguyễn ThắngView Answer on Stackoverflow
Solution 6 - JavascriptMadhav SinghView Answer on Stackoverflow
Solution 7 - JavascriptNishanView Answer on Stackoverflow
Solution 8 - JavascriptVicheansView Answer on Stackoverflow
Solution 9 - JavascriptRodView Answer on Stackoverflow
Solution 10 - JavascriptShashwat BangarView Answer on Stackoverflow