【Ajax】配列JSONデータを読み込みパースする方法

ajax

JSONデータのパース方法を過去に紹介しました。コチラです。AjaxでJSON形式のデータを読み込みパースする方法

過去ページでも配列JSONをパースする方法を少し紹介しましたが、配列JSONをパースする方法の要望が多かったので、独立したページを作りました。

過去ページで紹介した方法よりもシンプルにパース出来る方法を紹介しています。

[スポンサーリンク]

この章でやること

ローカルファイルの配列JSONデータをパースします。

今回パースする配列JSON

今回パースする対象のファイルです。
ファイル名は、sample_list.jsonです。

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

配列JSONをパースするJavaScript(jQuery)

<!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 dataArray = data.error;
        for(var count in dataArray){
            message = message + dataArray[count].errorCode;
            message = message + ' : ';
            message = message + dataArray[count].errorMessage;
            message = message + '<br/>';
        }
        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>

デモ

こちらで実際に動かすことが出来ます。

demo

解説

36行目のfor文で、配列JSONをパースしています。
以前紹介した方法では、each文を使っていましたが、個人的にはfor文の方がシンプルで好きです。

ローカル環境へ、今回紹介したソースをコピペで作る場合、Chromeでは動作しないので気をつけてください。
FireFox、IEでは大丈夫です。
ローカルファイルを読込んでいるため、Chromeでは動作しません。(Chromeの仕様です。)

さいごに

配列JSONを扱う処理ですが、業務で使っていると意外と多いです。
(検索結果を表示したりするのによく出てきます。)
今回紹介した方法ですが、個人的にはよく使います。

JSONを扱うのであれば、配列JSONの扱い方も覚えておきましょう!
何かと便利です。
それでは!