按相反的顺序解析json列表

parse json list in reverse order

本文关键字：json 列表 顺序      更新时间：2023-09-26

我从json文件中提取了一个对象列表，并按照我想要的方式对它们进行了解析。唯一的问题是，我希望它们在HTML文档上以相反的顺序显示。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文档上的脚本示例。当前脚本生成的结果显示如下

s1s2s3但我需要实现s3s2s1

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

使用for的对象属性没有特定的保证顺序。。在循环中，但试试这个：

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

试试看：

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

这是一种接近的方法，不是100%有效，而是接近。

您需要先分离｛｝，然后再进行拆分。

只需向后构建字符串。

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内容时以正确的方式对其进行排序，而不是在接收时更改它。这样做不被认为是好的编程。

对象没有顺序。但幸运的是，你的钥匙似乎是按顺序命名的。

将其转换为数组：

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]

现在您可以从后面对数组进行迭代。。。

如果您的所有条目都像示例中那样维护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...
}
相关文章：