

jsonファイルの読み込みの際にnullが帰ってきた場合のみ表示させないようにしたいのですが、なかなかうまくできません。

以下コードになります。

time.json

[code]

    {
    　"fromTokyo" : {"air" : "1 hour 30 min", "train" : null, "bus" : null},
    　"fromOsaka" : {"air" : "1 hour 45 min", "train" : null, "bus" : null},
    　"fromFukuoka" : {"air" : "2 hour 10 min", "train" : null, "bus" : null}}
    
[/code]

index.html

[code]

    $(function() {
            $('#hoge').click(function(){
                $.ajax( {
                    url: 'time.json',
                    dataType : 'json',
                    success: function( data ) {
                        var message = fromTokyo(data) + '</br>';
                        message = message + fromOsaka(data) + '</br>';
                        message = message + fromFukuoka(data);
                        $( '#fuga' ).html( message );
                    },
                    error: function( data ) {
                        $( '#fuga' ).html( '<font color="red">something went wrong.</font>' );
                    }
                });
            }
            );
        });
    　　　function fromTokyo(json) {
            var tokyo = "<b>From Tokyo</b>" + '</br>';
                tokyo = tokyo + 'Airplane : ' + json.fromTokyo.air + '</br>';
                tokyo = tokyo + 'Train : ' + json.fromTokyo.train + '</br>';
                tokyo = tokyo + 'Bus : ' + json.fromTokyo.bus + '</br>';
            return tokyo;
        }// 以下fromOsaka,fromFukuoka同じ関数
    
[/code]

  
出力結果

From Tokyo  
Airplane : 1 hour 30 min  
Train : null  
Bus : null

From Osaka  
Airplane : 1 hour 45 min  
Train : null  
Bus : null

From Fukuoka  
Airplane : 2 hour 10 min  
Train : null  
Bus : null

ここでnullを持つデータは吐き出さずに、

From Tokyo  
Airplane : 1 hour 30 min

From Osaka  
Airplane : 1 hour 45 min

From Fukuoka  
Airplane : 2 hour 10 min

のようにしたいです。

ご教授宜しくお願いいたします。

＊追記＊  
さらに発展させてみたく追記させていただきます。

日本地図をクリックして各都道府県の`attr`とマッチするデータを取得する事は可能でしょうか？  
例えば`<p class="hokkaido"
title="hokkaido">北海道</p>`をクリックして北海道へのアクセス時間のデータを以下のjsonから取得する形になります。

[code]

    {
    "hokkaido" : {
        "Tokyo" : {"air" : "1 hour 30 min", "train" : null, "bus" : null},
        "Osaka" : {"air" : "1 hour 45 min", "train" : null, "bus" : null},
        "Fukuoka" : {"air" : "2 hour 10 min", "train" : null, "bus" : null}
    },
    "aomori" : {
        "Tokyo" : {"air" : "1 hour 20 min", "train" : "3 hour 20 min", "bus" : null},
        "Osaka" : {"air" : null, "train" : null, "bus" : null},
        "Fukuoka" : {"air" : null, "train" : null, "bus" : null}
    },
    "iwate" : {
        "Tokyo" : {"air" : null, "train" : "2 hour 20 min", "bus" : "7 hour 25 min"},
        "Osaka" : {"air" : null, "train" : null, "bus" : null},
        "Fukuoka" : {"air" : null, "train" : null, "bus" : null}
    },
    "miyagi" : {
        "Tokyo" : {"air" : null, "train" : "1 hour 36 min", "bus" : "5 hour 27 min"},
        "Osaka" : {"air" : null, "train" : null, "bus" : null},
        "Fukuoka" : {"air" : null, "train" : null, "bus" : null}
    } }
    
[/code]


CC BY-SA 3.0
2015-02-23T11:08:33.523
6967
2015-02-24T11:23:34.390
2015-02-24T09:31:48.230
8500
8500
question
javascript jquery json
jQuery.ajaxでJSONがnullの場合の処理


fromTokyoで

[code]

    if(json.fromTokyo.train)
    {
        tokyo += 'Train :' + json.fromTokyo.train + '<br />';
    }
    
[/code]

のように分岐してやる必要があるかと。

## 追記部分に関して

JSONが`data`に取得済みとしたら`data.hokkaido`というようなデータにアクセスしたいのですよね。  
これは`data['hokkaido']`という書き方が出来ますので、jqueryを使って

[code]

    $('p').click(function(){
        var title = $(this).attr('title');
        var prefData = data[title];
        // 既存の表示処理
    });
    
[/code]

のように共通処理を記述できます。実際には`$('p')`だけでは範囲が広いので、各都道府県の`p`に共通のクラス(たとえば`prefecture`)を指定して`$('p.prefecture')`と変え、`title`属性も表示に影響するため`data-
title`等に変更したほうが良いと思います。


CC BY-SA 3.0
2015-02-23T11:20:20.860
6968
2015-02-24T11:23:34.390
2020-06-17T08:14:45.997
-1
5750
6967
answer


これでできます。  
必要に応じて`undefined`も非表示の条件に入れてください。

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
    
        var data = {
          "fromTokyo" : {"air" : "1 hour 30 min", "train" : null, "bus" : null},
          "fromOsaka" : {"air" : "1 hour 45 min", "train" : null, "bus" : null},
          "fromFukuoka" : {"air" : "2 hour 10 min", "train" : null, "bus" : null}
        }
    
        function fromTokyo(json) {
          var tokyo = "<b>From Tokyo</b>" + '<br />';
          if(json.fromTokyo.air != null){
            tokyo += 'Airplane : ' + json.fromTokyo.air + '<br />';
          }
          if(json.fromTokyo.train != null){
            tokyo += 'Train : ' + json.fromTokyo.train + '<br />';
          }
          if(json.fromTokyo.bus != null){
            tokyo += 'Bus : ' + json.fromTokyo.bus + '<br />';
          }
          return tokyo;
        }
    
        $('div').html( fromTokyo(data) );
    
      });
    </script>
    
    <div></div>
[/code]

余談ですが･･･  
`"fromTokyo", "fromOsaka",
"fromFukuoka"`と同じデータ構造を持っているなら、関数に渡すときにこう渡せばメソッドは一つで済みます。  
メソッド名`fromXXX`はセンスないので何か別の名前にした方がいいですね。。

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
    
        var data = {
          "fromTokyo" : {"air" : "1 hour 30 min", "train" : null, "bus" : null},
          "fromOsaka" : {"air" : "1 hour 45 min", "train" : null, "bus" : null},
          "fromFukuoka" : {"air" : "2 hour 10 min", "train" : null, "bus" : null}
        }
    
        function fromXXX(location) {
          var output = "";
          if(location.air != null){
            output += 'Airplane : ' + location.air + '<br />';
          }
          if(location.train != null){
            output += 'Train : ' + location.train + '<br />';
          }
          if(location.bus != null){
            output += 'Bus : ' + location.bus + '<br />';
          }
          return output;
        }
    
        var message = "";
        message += "<b>From Tokyo</b>" + '<br />';
        message += fromXXX(data.fromTokyo);
        message += "<b>From Osaka</b>" + '<br />';
        message += fromXXX(data.fromOsaka);
        message += "<b>From Fukuoka</b>" + '<br />';
        message += fromXXX(data.fromFukuoka);
    
        $('div').html( message );
    
      });
    </script>
    
    <div></div>
[/code]


CC BY-SA 3.0
2015-02-23T14:37:28.023
6976
2015-02-23T14:48:34.210
2015-02-23T14:48:34.210
7214
7214
6967
answer