以相反的顺序解析json列表 [英] parse json list in reverse order

问题描述

我从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 Doc上的脚本示例当前脚本产生的结果显示如下：

s1
s2
s3
但是我需要达到
s3
s2
s1

 < script type =text / javascript> 
函数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）{
 //从JSON文件初始化数据解析
 var data = JSON.parse（hr.responseText）; 
 //初始化s并将目标位置设置为sid在HTML体内
 var s = document.getElementById（s）; 
 //将serDate.innerHTML初始化为空
 s.innerHTML =; 
 //在sermonList.json文件中循环所有对象和数据
用于（var obj in data）{
 //显示s日期，图标，将audioSrc固定到图标
 / * 
 //要将这些项目从最高索引显示到最低
 // 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）; 
 //载入
时显示文字s.innerHTML =要求...; 
} 
< / script> 
  

解决方案

使用对象属性没有特定的保证顺序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  {
 console.log（obj [keys [i]]）; 
} 
  

小提琴

  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）{
 //从JSON文件初始化数据解析
 var data = JSON.parse（hr.responseText）; 
 //初始化s并将目标位置设置为HTML body中的s Id 
 
 
 var s = document.getElementById（s）; 
 //将serDate.innerHTML初始化为空
 s.innerHTML =; 
 //循环sermonList.json文件中的所有对象和数据
 
 var keys = Object.keys（obj）.reverse（）; 
 for（i = 0; i  var obj = data [keys [i]]; 
 
 //显示日期，图标，将audioSrc固定到图标
 / * 
 //要将这些项目从最高索引显示到最低
 / / s3，s2，s1 
 * / 
 s.innerHTML + =日期：+ obj.date +< a href ='+ obj.audioSrc +'target ='blank' >< img src ='+ obj.iconSrc +'>< / a>< br />; 
} 
} 
} 
 hr.send（null）; 
 //载入
时显示文字s.innerHTML =要求...; 
} 
  

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>

解决方案

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

这篇关于以相反的顺序解析json列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！