javascript - AJAX の配列応答にアクセスする方法

Question

これは、配列形式の AJAX 呼び出し応答です

[1,2,3,4,5,6]

success: function(outputfromserver) {


$.each(outputfromserver, function(index, el) 
{ 


});

outputfromserver のすべての値にアクセスするにはどうすればよいですか??

outputfromserver を意味します 0 番目の値は 1 、2 番目の要素は 2 、 ----- など

Answer 1

AJAX リクエストがどのようなものかを知っておくと役立ちます。$.ajax() を使用して dataType を JSON として指定するか、$.getJSON() を使用することをお勧めします。

$.ajax() を示し、配列内の戻り値にアクセスする方法を示す例を次に示します。

$.ajax({
    url: 'test.json', // returns "[1,2,3,4,5,6]"
    dataType: 'json', // jQuery will parse the response as JSON
    success: function (outputfromserver) {
        // outputfromserver is an array in this case
        // just access it like one

        alert(outputfromserver[0]); // alert the 0th value

        // let's iterate through the returned values
        // for loops are good for that, $.each() is fine too
        // but unnecessary here
        for (var i = 0; i < outputfromserver.length; i++) {
            // outputfromserver[i] can be used to get each value
        }
    }
});

ここで、$.each を使用することに固執する場合は、次のように成功オプションが機能します。

success: function (outputfromserver) {

    $.each(outputfromserver, function(index, el) {
        // index is your 0-based array index
        // el is your value

        // for example
        alert("element at " + index + ": " + el); // will alert each value
    });
}

ご不明な点がございましたら、お気軽にお問い合わせください。

Answer 2

配列は有効な JSON 文字列です。JSON パーサーを使用して解析する必要があります。

success: function(outputfromserver) {
    var data = JSON.parse(outputfromserver);
    $.each(data, function(index, el) { 
        // Do your stuff
    });
},
...

Answer 3

配列のようなJSオブジェクトを使用できます

たとえば、次のようにします。

// Loop through all values in outputfromserver
for (var index in outputfromserver) {
  // Show value in alert dialog:
  alert( outputfromserver[index] );
}

このようにして、配列の最初の次元で値を取得できます。上記for..loopは次のような値を取得します。

// Sample values in array, case: Indexed array
outputfromserver[0];
outputfromserver[1];
outputfromserver[2];
// So on until end of world... or end of array.. whichever comes first.
outputfromserver[...];

ただし、このように実装すると、 を使用して、for ( index in array )インデックス付き1,2,3,4,...キーだけでなく、名前付きインデックスに関連付けられた値も 取得します。

// Sample values in array, case: accosiated/mixed array
outputfromserver["name"];
outputfromserver["phone"];
outputfromserver[37];
outputfromserver[37];
outputfromserver["myindex"];
// So on until end of world... or end of array.. whichever comes first.
outputfromserver[...];

つまり、配列にはインデックス付きの値や名前に関連付けられた値を含めることができますが、配列内のすべての値は引き続き処理されます。

多次元のものを使用している場合

次に、ネストされたfor (...)ループを追加するか、再帰関数を作成して、すべての値をループすることができます。

多次元は次のようになります。

// Sample values in array, case: indexed multidimensional array
outputfromserver[0][0];
outputfromserver[0][1];
outputfromserver[1][0];
outputfromserver[1][...];
outputfromserver[...][...];

更新、JSON オブジェクト:

サーバーが JSON でエンコードされた文字列を返す場合、次の方法で JavaScript オブジェクトに変換できます。

try { 
    // Try to convert JSON string with jQuery:
    serveroutputobject = $.parseJSON(outputfromserver); 
} catch (e) {
    // Conversion failed, result is not JSON encoded string 
    serveroutputobject = null;
}

// Check if object converted successfully:
if ( serveroutputobject !== null ) {
    // Loop through all values in outputfromserver
    for (var index in serveroutputobject) {
        // Append value inside <div id="results">:
        $('#results').append( serveroutputobject[index] + "<br/>" );
    }
}
// In my own projects I also use this part if server can return normal text too:
// This way if server returned array we parse it and if server returns text we display it. 
else {
    $('#results').html( outputfromserver );
}

詳細はこちら

Answer 4

$.ajax({
    type : "POST",
    dataType: "json",
    url : url,
    data:dataString,
    success: function(return_data,textStatus) {



         temperature.innerText=return_data.temp;
                   // OR
        **temperature.innerText=return_data['temp'];**  

    },
    error: function(jqXHR, textStatus, errorThrown) { 
                 alert("Error while accessing api [ "+url+"<br>"+textStatus+","+errorThrown+" ]"); return false;    
    }
 });