[解決済み] jQuery / JavaScriptでJSONデータをパースする方法は？

質問

次のような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を取得します。

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

このデータをループして、それぞれの名前をdivに配置するにはどうしたらよいでしょうか？

どのように解決するのですか？

サーバー側のスクリプトで、適切な Content-Type: application/json レスポンスヘッダーを使用して、jQuery に JSON であることを示す必要があります。 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
        }));
    });
});