Getting a different data object on JavaScript or Json

I am trying to get a data object when I click the div which has different attribute and here is some example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var a = {
        "from Japan" : {"air" : "1 hour 30 min", "train" : null, "bus" : null},
        "from HongKong" : {"air" : "1 hour 45 min", "train" : null, "bus" : null},
        "from Taiwan" : {"air" : "2 hour 10 min", "train" : null, "bus" : null}
}

var b = {
        "from Japan" : {"air" : "1 hour 20 min", "train" : "3 hour 20 min", "bus" : null},
        "from HongKong" : {"air" : null, "train" : null, "bus" : null},
        "from Taiwan" : {"air" : null, "train" : null, "bus" : null}
}

var c = {
        "from Japan" : {"air" : null, "train" : "2 hour 20 min", "bus" : "7 hour 25min"},
        "from HongKong" : {"air" : null, "train" : null, "bus" : null},
        "from Taiwan" : {"air" : null, "train" : null, "bus" : null}
}

var d = {
        "from Japan" : {"air" : null, "train" : "1 hour 36 min", "bus" : "5 hour 27min"},
        "from HongKong" : {"air" : null, "train" : null, "bus" : null},
        "from Taiwan" : {"air" : null, "train" : null, "bus" : null}
}

$('#hoge ul li').click(function() {
    var place = $(this).attr('title');
    var message = "";
        message += "<b>From Japan</b>" + '<br />';
        message += fromArea(place.Japan);
        message += "<b>From HongKong</b>" + '<br />';
        message += fromArea(place.HongKong);
        message += "<b>From Taiwan</b>" + '<br />';
        message += fromArea(place.Taiwan);
        $('#fuga').html( message );

    function fromArea(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;
    }
});
</script>


<div id="hoge">
    <ul>
        <li title="a">
            Place A
        </li>
        <li title="b">
            Place B
        </li>
        <li title="c">
            Place C
        </li>
        <li title="d">
            Place D
        </li>
    </ul>
</div>

<div id="fuga"></div>

Expected result when I click title="a"

From Japan

Airplane : 1 hour 30 min

From HongKong

Airplane : 1 hour 45min

From Taiwan

Airplane : 2 hour 10min

I want to get a different results when I click title="b" title="c" title="d"

however I could not get a data from different titles..... please give me an idea?

added

Since I got the correct result, I'd like to develop this plugin.

I's like to hide fromArea message if any of the area has null result.

example:

current result

From Japan
Train : 1 hour 36 min
Bus : 5 hour 27min
From HongKong
From Taiwan

to

From Japan
Train : 1 hour 36 min
Bus : 5 hour 27min

Another Update

I've tried @vrluckyin 's method but seems like something wrong with my data objects.....?!?!

var Hokkaido = {
        'Tokyo' : {'air' : '1 hour 30 min', 'train' : null, 'bus' : null},
        'Osaka' : {'air' : '1 hour 45 min', 'train' : null, 'bus' : null},
        'Fukuoka' : {'air' : '2 hours 10 min', 'train' : null, 'bus' : null},
}
var Aomori = {
        'Tokyo' : {'air' : '1 hours 20 min', 'train' : '3 hours 20 min', 'bus' : null},
        'Osaka' : {'air' : null, 'train' : null, 'bus' : null},
        'Fukuoka' : {'air' : null, 'train' : null, 'bus' : null}
}

var Iwate = {
        "Tokyo" : {"air" : null, "train" : "2 hours 20 min", "bus" : "7 hours 25 min"},
        "Osaka" : {"air" : null, "train" : null, "bus" : null},
        "Fukuoka" : {"air" : null, "train" : null, "bus" : null}
}

var Miyagi = {
        "Tokyo" : {"air" : null, "train" : "1 hour 36 min", "bus" : "5 hours 27 min"},
        "Osaka" : {"air" : null, "train" : null, "bus" : null},
        "Fukuoka" : {"air" : null, "train" : null, "bus" : null}
}

$('#hoge ul li').click(function() {

  var place = $(this).attr('title');
  if (place != undefined) {
    var message = "";
    message += fromArea('Tokyo', place);
    message += fromArea('Osaka', place);
    message += fromArea('Fukuoka', place);
    $('#fuga').html(message);
  }

  function fromArea(name, location) {
    location = eval(location + '.' + name);
    var output = "";
    if(location.air != null) {
        output += 'Airplane : ' + location.air + '<br />';
    }
    if(location.train != null) {
        output += 'Train : ' + location.air + '<br />';
    }
    if(location.bus != null) {
        output += 'Bus : ' + location.air + '<br />';
    }
    if(output != "") {
        output = "<b> From " + name +"</b>" + "<br />" + output;
    }
    return output;
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hoge">
  <ul>
    <li title='Hokkaido'>
      Hokkaido
    </li>
    <li title='Aomori'>
      Aomori
    </li>
    <li title='Iwate'>
      Iwate
    </li>
    <li title='Miyagi'>
      Miyagi
    </li>
  </ul>
</div>
<div id="fuga"></div>