jQuery を使用して JSON データを反復処理して表示するにはどうすればよいですか?

jQuery / JavaScript を使用した JSON データの解析

Web サービスまたは API を操作する場合、JSON データを受信するのが一般的です。 Web ページ上でデータを表示および操作するには、このデータを使用可能な形式に解析する必要があります。

問題ステートメント:
JSON データを返す次の AJAX 呼び出しを考えてみましょう:

$(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: 'http://example/functions.php',
        data: { get_param: 'value' },
        success: function (data) {
            var names = data;
            $('#cand').html(data);
        }
    });
});

#cand div で取得された JSON データは次のようになりますthis:

[
    { "id": "1", "name": "test1" },
    { "id": "2", "name": "test2" },
    { "id": "3", "name": "test3" },
    { "id": "4", "name": "test4" },
    { "id": "5", "name": "test5" }
]

質問が生じます:この JSON データをループして、それぞれの名前を個別の div に表示するにはどうすればよいですか?

解決策:
JSON データを正しく解析するには、サーバー側スクリプトが適切な Content-Type: application/json 応答ヘッダーを設定していることを確認する必要があります。 jQuery がデータを JSON として認識するには、AJAX 呼び出しで dataType: 'json' を指定する必要があります。

正しいデータ型を取得したら、$.each() 関数を使用して反復処理できます。データ:

$.ajax({
    type: 'GET',
    url: 'http://example/functions.php',
    data: { get_param: 'value' },
    dataType: 'json',
    success: function (data) {
        $.each(data, function (index, element) {
            $('body').append($('<div>', {
                text: element.name
            }));
        });
    }
});

または、より簡潔にするには $.getJSON() メソッドを使用できます。アプローチ:

$.getJSON('/functions.php', { get_param: 'value' }, function (data) {
    $.each(data, function (index, element) {
        $('body').append($('<div>', {
            text: element.name
        }));
    });
});

これにより、JSON データ内の名前ごとに新しい div が作成され、Web ページに表示されます。

以上がjQuery を使用して JSON データを反復処理して表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。