I have pulled a list of objects from a json file and parsed them how I want them. The only problem is that I want them to display in reverse order on the HTML Doc. Example of json list.

{
"s1":{ "date":"date1", "iconSrc":"image/icon.png", "audioSrc":"../audio_files/1.mp3" },
"s2":{ "date":"date2", "iconSrc":"image/icon1.png", "audioSrc":"../audio_files/2.mp3" },
"s3":{ "date":"date3", "iconSrc":"image/icon2.png", "audioSrc":"../audio_files/3.mp3" }
}

Example of script on HTML Doc. The current script produces results that display as follows

s1 s2 s3 But I need to achieve s3 s2 s1

<script type="text/javascript">
function ajax_get_json(){
var hr = new XMLHttpRequest();
hr.open("GET", "sList.json", true);
hr.setRequestHeader("Content-type", "application/json", true);
hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
    //Initialize the data parse from JSON file
var data = JSON.parse(hr.responseText);
//Initializes s and sets the destination location as s Id within HTML body
    var s = document.getElementById("s");
    //Initialize serDate.innerHTML as null
    s.innerHTML = "";
    //Loops all objects and data within the sermonList.json file
    for(var obj in data){
        //Displays s dates, icon, anchors the audioSrc to the icon
                    /*
                    //WANT THESE ITEMS TO BE DISPLAYED FROM HIGHEST INDEX TO LEAST
                    //s3, s2, s1
                    */
            s.innerHTML += "Date: "+data[obj].date+" <a href='"+data[obj].audioSrc+"' target='blank'><img src='"+data[obj].iconSrc+"'></a><br />";
        }
    }
    }
    hr.send(null);
    //Displays text while loading
    s.innerHTML = "requesting...";
}
</script>

I have pulled a list of objects from a json file and parsed them how I want them. The only problem is that I want them to display in reverse order on the HTML Doc. Example of json list.

{
"s1":{ "date":"date1", "iconSrc":"image/icon.png", "audioSrc":"../audio_files/1.mp3" },
"s2":{ "date":"date2", "iconSrc":"image/icon1.png", "audioSrc":"../audio_files/2.mp3" },
"s3":{ "date":"date3", "iconSrc":"image/icon2.png", "audioSrc":"../audio_files/3.mp3" }
}

Example of script on HTML Doc. The current script produces results that display as follows

s1 s2 s3 But I need to achieve s3 s2 s1

<script type="text/javascript">
function ajax_get_json(){
var hr = new XMLHttpRequest();
hr.open("GET", "sList.json", true);
hr.setRequestHeader("Content-type", "application/json", true);
hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
    //Initialize the data parse from JSON file
var data = JSON.parse(hr.responseText);
//Initializes s and sets the destination location as s Id within HTML body
    var s = document.getElementById("s");
    //Initialize serDate.innerHTML as null
    s.innerHTML = "";
    //Loops all objects and data within the sermonList.json file
    for(var obj in data){
        //Displays s dates, icon, anchors the audioSrc to the icon
                    /*
                    //WANT THESE ITEMS TO BE DISPLAYED FROM HIGHEST INDEX TO LEAST
                    //s3, s2, s1
                    */
            s.innerHTML += "Date: "+data[obj].date+" <a href='"+data[obj].audioSrc+"' target='blank'><img src='"+data[obj].iconSrc+"'></a><br />";
        }
    }
    }
    hr.send(null);
    //Displays text while loading
    s.innerHTML = "requesting...";
}
</script>

• java
• javascript
• html
• json

Share Improve this question Follow edited Jul 9, 2013 at 19:32 Naveen Kumar Alone 7,67855 gold badges3838 silver badges5858 bronze badges asked Jul 9, 2013 at 19:27 JRW2252JRW2252 8322 gold badges33 silver badges1515 bronze badges 4

• 4 there is no order guranteed by a json object. – loxxy Commented Jul 9, 2013 at 19:27
• If the names of the objects are literally s1, s2, you could shave off the 's' and sort them by the number. Maybe shove the objects into an array first. – Helto Commented Jul 9, 2013 at 19:33
• @Helto if the list is to be sorted then it really has to be an array. – Pointy Commented Jul 9, 2013 at 19:34
• Adding an ordinal to each song could also help you sort them. – Helto Commented Jul 9, 2013 at 19:34

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

There is no specific guaranteed order for the object properties using for..in loop, but try this one:

var obj = {
"s1":{ "date":"date1", "iconSrc":"image/icon.png", "audioSrc":"../audio_files/1.mp3" },
"s2":{ "date":"date2", "iconSrc":"image/icon1.png", "audioSrc":"../audio_files/2.mp3" },
"s3":{ "date":"date3", "iconSrc":"image/icon2.png", "audioSrc":"../audio_files/3.mp3" }
};

var keys = Object.keys(obj).reverse();

for(i=0; i< keys.length; i++)
{
    console.log(obj[keys[i]]);
}

Fiddle

function ajax_get_json() {
    var hr = new XMLHttpRequest();
    hr.open("GET", "sList.json", true);
    hr.setRequestHeader("Content-type", "application/json", true);
    hr.onreadystatechange = function () {
        if (hr.readyState == 4 && hr.status == 200) {
            //Initialize the data parse from JSON file
            var data = JSON.parse(hr.responseText);
            //Initializes s and sets the destination location as s Id within HTML body


            var s = document.getElementById("s");
            //Initialize serDate.innerHTML as null
            s.innerHTML = "";
            //Loops all objects and data within the sermonList.json file

            var keys = Object.keys(obj).reverse();
            for (i = 0; i < keys.length; i++) {
                var obj = data[keys[i]];

                //Displays s dates, icon, anchors the audioSrc to the icon
                /*
                    //WANT THESE ITEMS TO BE DISPLAYED FROM HIGHEST INDEX TO LEAST
                    //s3, s2, s1
                    */
                s.innerHTML += "Date: " + obj.date + " <a href='" + obj.audioSrc + "' target='blank'><img src='" + obj.iconSrc + "'></a><br />";
            }
        }
    }
    hr.send(null);
    //Displays text while loading
    s.innerHTML = "requesting...";
}

try it:

var jsonarray = json.split(',');
var reversejson = ""
for(var i=jsonarray.lenght;i>0;i--){
   reversejson += jsonarray[i];
}

its a close approach, doen't work 100% but its close.

You'll need to separate the {} first before split it.

Simply building the string backwards.

var html_string = '';
for(var obj in data) {
    var current_string = html_string;
    html_string = "Date: "+data[obj].date+" <a href='"+data[obj].audioSrc+"' target='blank'><img src='"+data[obj].iconSrc+"'></a><br />" + current_string;
}

s.innerHTML = html_string;

By the way, I should add that this is not a good approach. You should consider sorting the json-content the right way when you send it, instead of altering it when recieving. It's not considered good programming to do this.

Objects have no order. But luckily, your keys seem to be named with order.

Converting it into an array:

var obj  = {
"s1":{ "date":"date1", "iconSrc":"image/icon.png", "audioSrc":"../audio_files/1.mp3" },
"s2":{ "date":"date2", "iconSrc":"image/icon1.png", "audioSrc":"../audio_files/2.mp3" },
"s3":{ "date":"date3", "iconSrc":"image/icon2.png", "audioSrc":"../audio_files/3.mp3" }
};

var arr = []; 

for(var i in obj) arr[+i.substring(1)] = obj[i];

arr = arr.filter(function(i) {  return i || false; });

// arr is now : [s1 Object, s2 Object, s3 Object]

Now you could iterate over the array from back...

You should be able to do this without sorting IF all of your entries maintain the s1,s2 keys as in your example and you add the count to your object

var obj  = {
"items":"3",
"s1":{ "date":"date1", "iconSrc":"image/icon.png", "audioSrc":"../audio_files/1.mp3" },
"s2":{ "date":"date2", "iconSrc":"image/icon1.png", "audioSrc":"../audio_files/2.mp3"},
"s3":{ "date":"date3", "iconSrc":"image/icon2.png", "audioSrc":"../audio_files/3.mp3" }
};
var size = obj.items;
for(var i = size; i > 0; i--) {
  var item = obj['s'+i];
  // do something with item.date, item.iconSrc...
}