How to sort key/value objects in javascript?

Question

Following How can I add a key/value pair to a JavaScript object? and Best way to store a key=>value array in JavaScript?, I built my Key/Value map (object).

And I build it like below where MyFunc returns an array:

let MyMap = {}; // object
for(let i = 0; i < MyContainer.length; i++)
{
   // create the key (id of current element) and set its value as array of elements (result from MyFunc)
   await MyFunc(MyContainer[i]).then((response) => MyMap[MyContainer[i].id] = response); 
}

MyMap look like this:

MyMap = 
{
   1: [Object, Object, Object, …] // 13 elements
   2: [Object, Object, Object, …] // 7 elements
   3: [Object, Object, Object, …] // 4 elements
   4: [Object]
   5: [Object]
   6: [Object, Object, Object, …] // 5 elements
   7: [Object, Object, Object, …] // 9 elements
}

I would like to iterate my map (keys) but starting from the key that has the smallest value (The smallest array).

Therefore, I would like to:

• access MyContainer and pick the element that has id 4, and do stuff (has the smallest array: 1 element)
• then access MyContainer and pick the element that has id 5, and do stuff
• then 3
• then 6
• .. etc
• and finally access MyContainer and pick the element that has id 1 and do stuff (has the largest array: 13 elements)

Now since myMap is an object, then I can't sort it.

How can I accomplish this?

Answer 1

Eventually, you won't be able to use an Object because the order of the keys is not guaranteed.

You can:

• Use Object.keys(obj) to get the keys of your object as an Array
• Use those keys to build an Array of objects of your structure, each item in the array being the key/value pair of your original object.
• Then sort that Arrayof objects based on the length of each item.value within it. The item.value in this case is your original object's values which are Arrays

const obj = {
  "1": [1, 2, 3],
  "2": [1],
  "3": [1, 2],
  "4": [1, 2, 3, 4]
};

// Transform object into a nested array
// Each array item contains the value of a key of your original object,
// which itself is an Array
const arr = Object.keys(obj).reduce((arr, key) => {
 arr.push({ key: key, value: obj[key] });
 
 return arr;
}, [])

// Sort the nested Array based on the length of each item
const sortedArr = arr.sort((a, b) => a.value.length - b.value.length);

console.log(sortedArr);

Same as above but more compact, using chaining

const obj = {
  "1": [1, 2, 3],
  "2": [1],
  "3": [1, 2],
  "4": [1, 2, 3, 4]
};

const sortedArr = Object.keys(obj).reduce((arr, key) => {
  arr.push({ key: key, value: obj[key] });

  return arr;
}, [])
.sort((a, b) => a.value.length - b.value.length)

console.log(sortedArr);