2

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

5 に答える 5

3

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]]);
}

フィドル

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...";
}
于 2013-07-09T19:31:18.713 に答える
0

オブジェクトには順序がありません。しかし幸いなことに、キーには順番に名前が付けられているようです。

それを配列に変換する：

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]

これで、配列を後ろから反復処理できます...

于 2013-07-09T19:34:13.253 に答える
0

それを試してみてください：

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

それは近いアプローチであり、100％は機能しませんが、近いです。

分割する前に、まず {} を分離する必要があります。

于 2013-07-09T19:31:39.113 に答える
0

文字列を逆方向に構築するだけです。

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 は、受信時に変更するのではなく、送信時に正しい方法でソートすることを検討する必要があります。これを行うのは良いプログラミングとは見なされません。

于 2013-07-09T19:32:39.163 に答える