Arranging a JSON data structure (varied sequence in Firefox)

Question

Arranging a JSON data structure (varied sequence in Firefox)

Looking to organize a JSON Object based on the key - Chrome maintains the order I need, but Firefox does not.

Below is an example of my JSON object:

{
  "media": {
    "1387185503": {
      "id_profil": "7256",
      "photo_profil": "http://www.mupiz.com/7256/picture",
      "phrase_feed": "a ajouté une nouvelle vidéo",
      "nom_media": "Jam a la casserole",
      "nom_profil": "Camille Boullier de Branche",
      "url_profil": "camille-boullier-de-branche",
      "streaming": "<iframe width=\"270\" height=\"200\" src=\"http://www.youtube.com/embed/K6i_avCwsvQ?html5=1\" frameborder=\"0\" allowfullscreen></iframe>",
      "url_media": "http://www.mupiz.com/camille-boullier-de-branche/video/jam-a-la-casserole"
    },
    "1387185460": {
      "id_profil": "7256",
      "photo_profil": "http://www.mupiz.com/7256/picture",
      "phrase_feed": "a ajouté une nouvelle vidéo",
      "nom_media": "festival silhouette 2010 avec IGIT",
      "nom_profil": "Camille Boullier de Branche",
      "url_profil": "camille-boullier-de-branche",
      "streaming": "<object width=\"270px\" height=\"200px\" ><param name=\"movie\" value=\"http://www.dailymotion.com/swf/xet02y&related=0&colors=background:000000;foreground:FFFFFF;special:88868A;\"></param><param name=\"wmode\" value=\"transparent\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowScriptAccess\" value=\"always\"></param><embed src=\"http://www.dailymotion.com/swf/xet02y&related=0&colors=background:000000;foreground:FFFFFF;special:88868A;\" type=\"application/x-shockwave-flash\" width=\"270\" wmode=\"transparent\"  height=\"200\" allowfullscreen=\"true\" allowscriptaccess=\"always\"></embed></object>",
      "url_media": "http://www.mupiz.com/camille-boullier-de-branche/video/festival-silhouette-2010-avec-igit"
    },
    "1385912810": {
      "id_profil": "36541",
      "photo_profil": "http://www.mupiz.com/36541/picture",
      "phrase_feed": "a ajouté une nouvelle chanson",
      "nom_media": "Sans titre",
      "nom_profil": "Eve IBK",
      "url_profil": "evelyne-zyss",
      "streaming": "\r\n  <div class=\"playerMedia\" onclick=\"InlinePlayer(this)\" data-url=\"http://www.mupiz.com/mp3/36541/mp3_85725.mp3\" data-id=\"mp3_85725.mp3\">Sans titre</div>\r\n",
      "url_media": "http://www.mupiz.com/evelyne-zyss/"
    }, .....

I aim to sort this section of the JSON object by timestamp in ascending order rather than descending.

Any suggestions?

Thank you

javascript ajax json

Answer 1

Answer №1

When 'strigify' numbers in JSON, browsers auto-sort the properties:

For instance, both Chrome and Firefox will behave similarly with this code snippet:

 var an_obj = { "4": "d", "1": "a", "2": "c"};
 alert(Object.keys(an_obj)); //will alert 1, 2, 4

However, when dealing with specific sample JSON data:

Chrome:

var an_obj = { "1387185460": "a", "1387185503": "b", "1385912810": "c"};
alert(Object.keys(an_obj)); // will alert "1385912810, 1387185460, 1387185503"

On the other hand, Firefox maintains the original order:

var an_obj = { "1387185460": "a", "1387185503": "b", "1385912810": "c"};
 alert(Object.keys(an_obj)); // will alert "1387185460, 1387185503, 1385912810"

This discrepancy exists due to Firefox's sorting algorithm behavior, which only comes into play when the first 3 characters are not identical.

In another example:

Chrome:

  var value2 = {"1003":1, "1001":2, "1000":3};
  alert(Object.keys(value2)); // will alert 1000, 1001, 1003

Firefox, on the other hand, preserves the initial sequence:

 var value2 = {"1003":1, "1001":2, "1000":3};
 alert(Object.keys(value2)); // will alert 1003, 1001, 1000

This issue is acknowledged by the Firefox team and is related to enumeration ordering as part of ES6. It is anticipated to be resolved in ES7 implementation.

To address your current dilemma, consider implementing the following approach:

var arr = {
        "media": {
            "1387185503": {
                // Data here
            },
            "1387185460": {
                // Data here
            },
            "1385912810": {
               // Data here
            }
        }
    };
 var properties=Object.keys( arr.media).sort();
 arr.media = properties.reduce(function(res, prop){
           res[prop] = arr.media[prop];
           return res;
       },{});

Alternatively, you could implement toJSON like so:

arr.media.toJSON = function(){
            var newMedia = properties.reverse().reduce(function(res, prop){
                res[prop] = arr.media[prop];
                return res;
            },{});
           return newMedia;
       };
 var newSortedObject =(JSON.stringify(arr.media));

We hope this provides some clarity and assistance!

Answer 2

When 'strigify' numbers in JSON, browsers auto-sort the properties:

For instance, both Chrome and Firefox will behave similarly with this code snippet:

 var an_obj = { "4": "d", "1": "a", "2": "c"};
 alert(Object.keys(an_obj)); //will alert 1, 2, 4

However, when dealing with specific sample JSON data:

Chrome:

var an_obj = { "1387185460": "a", "1387185503": "b", "1385912810": "c"};
alert(Object.keys(an_obj)); // will alert "1385912810, 1387185460, 1387185503"

On the other hand, Firefox maintains the original order:

var an_obj = { "1387185460": "a", "1387185503": "b", "1385912810": "c"};
 alert(Object.keys(an_obj)); // will alert "1387185460, 1387185503, 1385912810"

This discrepancy exists due to Firefox's sorting algorithm behavior, which only comes into play when the first 3 characters are not identical.

In another example:

Chrome:

  var value2 = {"1003":1, "1001":2, "1000":3};
  alert(Object.keys(value2)); // will alert 1000, 1001, 1003

Firefox, on the other hand, preserves the initial sequence:

 var value2 = {"1003":1, "1001":2, "1000":3};
 alert(Object.keys(value2)); // will alert 1003, 1001, 1000

This issue is acknowledged by the Firefox team and is related to enumeration ordering as part of ES6. It is anticipated to be resolved in ES7 implementation.

To address your current dilemma, consider implementing the following approach:

var arr = {
        "media": {
            "1387185503": {
                // Data here
            },
            "1387185460": {
                // Data here
            },
            "1385912810": {
               // Data here
            }
        }
    };
 var properties=Object.keys( arr.media).sort();
 arr.media = properties.reduce(function(res, prop){
           res[prop] = arr.media[prop];
           return res;
       },{});

Alternatively, you could implement toJSON like so:

arr.media.toJSON = function(){
            var newMedia = properties.reverse().reduce(function(res, prop){
                res[prop] = arr.media[prop];
                return res;
            },{});
           return newMedia;
       };
 var newSortedObject =(JSON.stringify(arr.media));

We hope this provides some clarity and assistance!

Arranging a JSON data structure (varied sequence in Firefox)

Answer №1

Similar questions

The operation was computed twice

On Internet Explorer 9, the window.open function is causing a new window to open up with

When the screen is at mobile width, elements with the class "Responsive" are hidden using the display:none; property. These elements can be

Exploring nested JSON structures in CosmosDB database

What is the best way to modify a constant array in Angular?

Checking for non-overlapping number ranges in an array in React/Javascript before submitting

Is it possible to configure Nginx to provide HTTPS on port 10000 and implement Basic Auth for an Express app?

User form not triggering post requests

Is there a way to output JSON objects and array elements programmatically?

Explore RxJs DistinctUntilChanged for Deep Object Comparison

JavaScript backspace function not functioning correctly

After updating to Eclipse Neon, the resolution of Javax.Json is not working properly

Tips for combining tables and outputting as JSON format?

endless cycle of scrolling for div tags

Displaying elapsed time in JavaScript (Node.js)

"Unlocking the power of AngularJS translate: A step-by-step

Unable to view PDF files on mobile devices within Ionic app, only accessible through browser interface

Can you provide steps on loading JSON data into a JavaScript web application and then randomly selecting a word from it?

Accessing values from an array within a JSON object using jqGrid

Is there a way to modify the value of an Angular ngModel using JavaScript or the console?