What to do if JSON is null in jQuery.ajax

I only want to display null when loading the json file, but I can't do it well.

Here's the code.

time.json

{
　"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}}

index.html

$(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 wrong.</font>');
                }
            });
        }
        );
    });
　　　function fromTokyo(json){
        vartokyo="<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;
    }// Hereafter, fromOsaka, fromFukuoka same function

Output Results

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

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

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

Now, don't spit out null data.

From Tokyo Airplane: 1 hour 30 min

From Osaka Airplane: 1 hour 45 min

From Fukuoka Airplane: 2 hour 10 min

I'd like to do something like that.

I look forward to your kind cooperation.

*add*
I would like to add it to further development.

Is it possible to get data that matches attr of each prefecture by clicking on the map of Japan?
For example, click <p class="hokkaido" title="hokkaido">Hokkaido</p> to obtain data on the access time to Hokkaido from the following json:

{
"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}
},
"myagi": {
    "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}
} }

javascript jquery json

2022-09-30 18:57

2 Answers

You can do it with this.
If necessary, include undefined in the hidden condition.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){

    vardata = {
      "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){
      vartokyo="<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>

By the way...
If you have the same data structure as "fromTokyo", "fromOsaka", and "fromFukuoka", pass it to a function like this and you only need one method.
The method name fromXXXX has no sense, so it would be better to use a different name.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){

    vardata = {
      "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>

2022-09-30 18:57

FromTokyo

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

Do you need to branch out like this?

If JSON has already acquired data, you want to access data like data.hokkaido.
You can write data['hokkaido'], so use jquery to write

$('p').click(function(){
    var title=$(this).atttr('title');
    var prefData=data[title];
    // Existing Display Processing
});

Common actions can be described as shown in .In fact, $('p') alone has a wide range, so data-title should be changed to $('p.prefect') by specifying a common class (for example, p) in each prefecture.

2022-09-30 18:57

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656