Ajaxでネスト(入れ子)のJSONデータを解析する方法

ajax

APIのレスポンスなどで、すっかりお馴染みとなったJSONですが、複雑な構造のJSONを見ることも珍しくはありません。

JSONも単純な構造であれば、難なく使えますが、複雑な構造になってくると一瞬おおお!ってなります。
ですが、ご安心を!
いくら複雑な構造になっても必ずパースは出来ます!

今回は、JSONの中にJSONが記述されている、いわゆる入れ子の状態のJSONをパース(解析)する方法を紹介します。

[スポンサーリンク]

単純な構造のJSON(入れ子とかになっていないやつ)のパース方法はこちらを参考にして下さい。
AjaxでJSON形式のデータを読み込みパースする方法

この章でやること

ネスト(JSONの中にJSONが記述されている)のJSONデータを解析します。

今回パースするJSON

JSONの中にJSONが2つあります。

{
    "responsMessage" : {"message":"success","returnCode":0},
    "responsData" : {"firstName":"Taro","lastName":"Yamada"}
}

JSONをパースするJavaScript(jQuery)

    $( function() {
        $( '#ajax-button' ) .click(
            function() {
                $.ajax( {
                    url: 'sample.json',
                    dataType : 'json',
                    success: function( data ) {
                        var responsMessage = parseResponsMessage(data);
                        var responsData = parseResponsData(data);
                        $( '#sample-result' ).html( responsMessage );
                        $( '#sample-data' ).html( responsData );
                        
                    },
                    error: function( data ) {
                        $( '#sample-result' ).html( '<font color="red">読み込みNG(ChromeではNG)</font>' );
                    }
                } );
            }
        );
    } );
 
    /*
    * ResponsMessageをパースする関数です。
    */
    function parseResponsMessage(data) {
        var ret = 'message : ' +  data.responsMessage.message + '<br/>';
        ret = ret + 'returnCode : ' +  data.responsMessage.returnCode;
        return ret;
    }

    /*
    * ResponsDataをパースする関数です。
    */
    function parseResponsData(data) {
        var ret = 'firstName : ' + data.responsData.firstName + '<br/>';
        ret = ret + 'lastName : ' + data.responsData.lastName;
        return ret;
    }

デモ

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

demo

解説

JSONの中にJSONが記述されている場合は、data.responsMessage.messageのようにキーをドットでつないで、目的のエレメント(項目)を参照します。

たとえ、3個4個ネストしていても、data.responsMessage.message.XXX.XXXXのようにつなげていけば、目的のエレメントまでアクセスできます。

!!!注意!!!

もしも、JSONのなかのJSONをシングルクォート(')で囲った場合は、文字列として扱われて、今回の方法ではパース出来ません。

{
    "responsMessage" : '{"message":"success","returnCode":0}',
    "responsData" : '{"firstName":"Taro","lastName":"Yamada"}'
}

もしも、シングルクォート(')で囲った場合は、ドットつなぎではなく、$.parseJSONを使って、文字列からJSONに変換した上で、パースを行いましょう。

$.parseJSONの使い方はこちらを参考にして下さい。
JSON形式の文字列をparseJSONでパースする

さいごに

いくらJSONが入れ子になったとしても、解析の仕方はかわりません。
ただし、注意しないといけないのは、JSONの中のJSONが文字列として扱われている場合です。
(上の!!!注意!!!の部分です。)

JSONが文字列として扱われているのに気付かずに、パースできない!なんてことにわたしはよくはまっていました。
悲しいことに1回2回ではなかったです。
みなさんは気を付けて下さい。。
それでは!