逆序解析json列表答案

【问题标题】：parse json list in reverse order逆序解析json列表
【发布时间】：2013-07-07 13:12:37
【问题描述】：

我从一个 json 文件中提取了一个对象列表，并按照我想要的方式解析它们。唯一的问题是我希望它们在 HTML Doc 上以相反的顺序显示。 json列表示例。

{
"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>

【问题讨论】：

json 对象不保证顺序。
如果对象名称的字面意思是 s1、s2，您可以去掉“s”并按数字排序。也许先将对象推入一个数组。
@Helto 如果要对列表进行排序，那么它确实必须是一个数组。
为每首歌曲添加序号也可以帮助您对它们进行排序。

标签： java javascript html json

【解决方案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...";
}

【讨论】：

【解决方案2】：

试试看：

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

它是一种接近的方法，不是 100% 有效，但它接近。

您需要先将 {} 分开，然后再拆分它。

【讨论】：

【解决方案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-content 进行排序，而不是在接收时更改它。这样做不被认为是好的编程。

【讨论】：

不一定有效，因为规范没有明确定义迭代顺序。
@Pointy - 你是什么意思？读取json的顺序总是和发送的一样？还是你的意思是for循环？
for ... in 循环不保证访问键的顺序。事实上，每次循环运行时它都可以是完全随机的，并且仍然符合规范。
我其实很喜欢你的方法。非常简单直接。问题：通过对json内容进行排序，您是指将其放入数组中，对吗？
@user2565769 - 是的，您应该立即以您将要使用的方式呈现数据。这意味着如果您想要另一个订单，则不应在 js 中执行此操作，而应在生成 json-string 的脚本/文件/程序中执行此操作。

【解决方案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]

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

【讨论】：

【解决方案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...
}

【讨论】：