0

I have an HTML page that contains a stringified JSON object. The object has this structure:

{
  "x":{
    "key1":[],
    "key2":{},
    "keyN":{},
    "myKey":{
      "randomID238492":{
        "items":[
          { "value":"zzzz" },
          { "value":"aaaa" },
          { ...}
        ]
      }
    }
  }
}

I want to replace this object with one in which the "items" array has been sorted. Here is what I will and won't know about the object:

  • "myKey" and "items" will always be the relevant object keys
  • "myKey" will contain only one random ID, and the "items" key will always be its first child
  • I won't know the order of "myKey" in the object.
  • I won't know the true randomID under which "items" nests.

Is there a clear, efficient way to replace this JSON object with one in which "items" has been sorted? Right now, I do it by using this jQuery function after the page has rendered:

  $(function() {

    var myData  = $( "#myJSON_string" )[0];         // <script> node that contains the string
    var myDataJSON = JSON.parse(myData.innerText);  // JSON string
    var myKeyJSON = myDataJSON["x"]["myKey"];       // object
    var myArr = myKeyJSON[Object.keys(myKeyJSON)[0]]["items"];  // array to sort

    // Now sort and revise. I'm leaving myCompare() out of the example for brevity
    myKeyJSON[Object.keys(myKeyJSON)[0]]["items"] = myArr.sort(myCompare);
    myDataJSON["x"]["myKey"] = myKeyJSON;
    myDataJSON = JSON.stringify(myDataJSON);
    myData.innerText = myDataJSON;
  });

This approach works, but it seems rather labored. It might be better, for example, if I could revise the JSON object "in place" without parsing it and then re-stringifying it.

Many SO posts, like this one, speak to the general question of how to sort a JSON array. But I can't see that any speak to the specific question posed here.

user697473
  • 2,165
  • 1
  • 20
  • 47
  • 1
    When it is in place it is nothing but a string. That string has to be converted to object as you are doing. Not sure why you need to replace the inner text at the end though and can't just use the stored data for whatever it is needed for. Could also store `Object.keys(myKeyJSON)[0]` as variable instead of looking for that more than once – charlietfl May 09 '20 at 22:19
  • Thank you. To explain: the HTML page with which I'm working contains a [selectize.js](https://selectize.github.io/selectize.js/) dropdown menu. The first time that I click on a particular `` field, selective.js populates the dropdown menu with options -- and the order of those options is determined by the "items" array in the JSON object. That's why I'm replacing the inner text at the end. (Unfortunately, I don't have control over selectize.js before the page is rendered.) – user697473 May 09 '20 at 22:34
  • 2
    Doubt there is a simpler general approach beyond slight refinements to what you have – charlietfl May 09 '20 at 22:43
  • This might be better suited to https://codereview.stackexchange.com – Nick May 09 '20 at 23:42

0 Answers0