AjaxでJSON形式のデータを読み込みパースする方法

ajax

前回はローカルファイル(html)を読み込むAjaxを紹介しました。
今回は前回と同じようにJSON形式のファイルを読み込みます。前回と違う点は、今回はJSONをパースして、実際のJSON形式とは異なる値を画面へ表示させるAjaxを紹介します。

[スポンサーリンク]

目次

  1. JSONファイルを読み込みパースします
  2. リスト形式のJSONファイルを読み込みパースします
  3. Ajaxでネスト(入れ子)のJSONデータを解析する方法

JSONファイルを読み込みパースします

JSONファイル読み込みの本体(index.html)

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>AjaxでJSONファイルを読み込みパースします。</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

<!-- スクリプト部分 -->
<script type="text/javascript">
    $( function() {
        $( '#ajax-button' ) .click(
            function() {
                $.ajax( {
                    url: 'sample.json',
                    dataType : 'json',
                    success: function( data ) {
                        var message = jsonParser(data);
                        $( '#sample-result' ).html( message );
                    },
                    error: function( data ) {
                        $( '#sample-result' ).html( '<font color="red">読み込みNG(ChromeではNG)</font>' );
                    }
                } );
            }
        );
    } );

    /*
    * JSONデータをパースする関数です。
    */
    function jsonParser(data) {
        var message = data.errorCode;
        message = message + '<br/>';
        message = message + data.errorMessage;
        return message;
    }
</script>

</head>


<!-- HTML部分 -->
<body>

<h1>AjaxでJSONファイルを読み込みパースします。</h1>
<p><input type="button" id="ajax-button" value="gooo" /> <br />
</p>
<div id="sample-result"></div>


</body>
</html>

読み込むファイル(sample.json)

{
    "errorCode" : "100",
    "errorMessage" : "エラーメッセージ"
}

実行結果

実行結果

リスト形式のJSONファイルを読み込みパースします

JSONファイル読み込みの本体(index.html)

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>AjaxでJSONファイル(リスト)を読み込みパースします。</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

<!-- スクリプト部分 -->
<script type="text/javascript">
    $( function() {
        $( '#ajax-button' ) .click(
            function() {
                $.ajax( {
                    url: 'sample_list.json',
                    dataType : 'json',
                    success: function( data ) {
                        var message = jsonParser(data);
                        $( '#sample-result' ).html( message );
                    },
                    error: function( data ) {
                        $( '#sample-result' ).html( '<font color="red">読み込みNG(ChromeではNG)</font>' );
                    }
                } );
            }
        );
    } );

    /*
    * JSONデータ(リスト)をパースする関数です。
    */
    function jsonParser(data) {
        var message = "";
        var count = 0;
        $(data.error).each( function() {
            message = message + data.error[count].errorCode;
            message = message + ' : ';
            message = message + data.error[count].errorMessage;
            message = message + '<br/>';
            count++;
        });
        return message;
    }
</script>

</head>


<!-- HTML部分 -->
<body>

<h1>AjaxでJSONファイル(リスト)を読み込みパースします。</h1>
<p><input type="button" id="ajax-button" value="gooo" /> <br />
</p>
<div id="sample-result"></div>


</body>
</html>

読み込むファイル(sample_list.json)

{
    "error" : [
                {
                    "errorCode" : "100",
                    "errorMessage" : "エラーメッセージその1"
                },
                {
                    "errorCode" : "200",
                    "errorMessage" : "エラーメッセージその2"
                }
              ]
}

実行結果

実行結果

実行環境

このプログラムを動かすにはjqueryが必要です。(jquery-1.8.2.jsを使っています。)
こちらからダウンロードして下さい。http://jqueryui.com/

ブラウザについて

こちらで紹介するプログラムは、Chromeではエラーになります。Chromeの使用でajaxを使ってローカルファイルを読み込むことが出来ません。
IE、FireFox、Safariで動作確認を行っています。