Question

我从json文件中提取了一个对象列表，并解析了我想要的对象。唯一的问题是我希望它们在HTML Doc上以相反的顺序显示。 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" }
}

HTML Doc上的脚本示例。当前脚本生成的结果显示如下

S1 S2 S3 但我需要实现 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>

Answer 1

使用for..in循环的对象属性没有特定的保证顺序，但请尝试以下方法：

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...";
}

Answer 2

试一试：

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

它是一个接近的方法，不要100％工作，但它的关闭。

在拆分之前，您需要先将{}分开。

Answer 3

只需向后构建字符串。

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;

顺便说一下，我应该补充一点，这不是一个好方法。您应该考虑在发送时以正确的方式对json内容进行排序，而不是在接收时对其进行更改。这样做不是一个好的编程。

Answer 4

物品没有订单。但幸运的是，您的密钥似乎以命令命名。

将其转换为数组：

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]

现在你可以从后面遍历数组...

Answer 5

你应该能够在没有排序的情况下做到这一点如果你的所有条目都像你的例子一样维护s1，s2键并且你将计数添加到你的对象

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...
}

以相反的顺序解析json列表

5 个答案: