How to sort through complex object by key

Question

I have been struggling to find a helpful resource given the peculiar nature of my object... I would like to simply sort an object alphabetically however I need to sort by my key.

here is an example object with the same schema of the object I am working with

{
     "sections": [
         {
           "title": "21Q4 Results",
           "states": {
                        "Maine": {
                                   "string1":[{stuff1}],
                                   "string2":[{stuff2}],                
                                 },
                        "Arkansas": {
                                   "string1":[{stuff1}],
                                   "string2":[{stuff2}],                
                                 },
                        "Kentucky": {
                                   "string1":[{stuff1}],
                                   "string2":[{stuff2}],                
                                 },
                      }
         }
                 ]
}

The goal is to arrange the sections.states in alphabetical order. Unfortunately, the structure of this object is generated by an API which I have no control over, so changing the structure from the backend is not really an option.

What is the best way to achieve this? Any help would be greatly appreciated.

Does this answer your question? [Sorting arrays in javascript by object key value](https://stackoverflow.com/questions/7889006/sorting-arrays-in-javascript-by-object-key-value) — Kinglish, Dec 01 '21 at 17:12
Maybe I did not understand something, but you cant sort object keys inside an object. You need to create a list of states and sort them. Object is a hashmap data structure, it means that even js engine cant guaranter you the order of keys — captain-yossarian from Ukraine, Dec 01 '21 at 17:14
@Kinglish - Unfortunately, that particular method is not available for objects -- but arrays only which results.states is not. This is why I have been struggling to find resources to help with this particular issue. — Austin Hallett, Dec 01 '21 at 17:14
@captain-yossarian Effectively, the object is being rendered in some Vue elements, and given they are looped through, sorting them first would allow us to display them in alphabetical order. — Austin Hallett, Dec 01 '21 at 17:15
You can consider js Map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map . It keeps keys in insertion order. — captain-yossarian from Ukraine, Dec 01 '21 at 17:17

score 1 · Answer 1 · answered Dec 01 '21 at 17:21

Here is a way to convert the states object into a sorted array in order to preserve a sort order.

let stuff1 = stuff2 = 'foobar'
let data = {
  "sections": [{
    "title": "21Q4 Results",
    "states": {
      "Maine": {
        "string1": [{ stuff1 }], "string2": [{ stuff2 }],
      },
      "Arkansas": {
        "string1": [{ stuff1 }], "string2": [{ stuff2 }],
      },
      "Kentucky": {
        "string1": [{ stuff1 }], "string2": [{ stuff2 }],
      },
    }
  }]
}

let newstates = Object.keys(data.sections[0].states).sort((a, b) => a.localeCompare(b)).map(s => ({state: s, data: data.sections[0].states[s] }));
console.log(newstates)

How to sort through complex object by key

1 Answers1