Doc
jQuery
<script type="text/Javascript">
$(document).ready(function(){
//Default Loading...
var stationName = ($("#station").val() == "") ? "Gudi" : $("#station").val();
drawData(stationName);
// Search
$("#showResults").click(function(){
var stationName = $("#station").val();
//alert(stationName);
drawData(stationName);
});
// Display Data
function drawData(station){
var url="http://railpnrapi.com/api/station_by_name/name/"+station+"/partial/1/format/jsonp/?jsonp_callback=localJsonpCallback";
$.ajax({
dataType: 'jsonp',
url: url,
success: function ( data ) {
var displayData ="<table class='table table-striped table-hover '>";
displayData += "<thead><tr class='warning'><th>Station Name</th><th>Code</th><th>State</th><th>Zip</th><th>Railway zone</th><th>Location(lat)</th><th>Lcoation(lng)</th></tr></thead><tbody>";
$.each(data.stations, function(i,stations){
stations.state = (stations.state ==null) ? "-" : stations.state;
stations.zip = (stations.zip ==null) ? "-" : stations.zip;
stations.railway_zone = (stations.railway_zone ==null) ? "-" : stations.railway_zone;
stations.location.lat = (stations.location.lat ==null) ? "-" : stations.location.lat;
stations.location.lng = (stations.location.lng ==null) ? "-" : stations.location.lng;
displayData += "<tr><td>"+stations.name+"</td>";
displayData += "<td>"+stations.code+"</td>";
displayData += "<td>"+stations.state+"</td>";
displayData += "<td>"+stations.zip+"</td>";
displayData += "<td>"+stations.railway_zone+"</td>";
displayData += "<td>"+stations.location.lat+"</td>";
displayData += "<td>"+stations.location.lng+"</td>";
displayData += "</tr>";
});
displayData +="</tbody></table>";
$('#datatable').html(displayData);
}
});
}
});
</script>
HTML
<div class="col-md-6">
Station Name :<input id='station' name='station' type="text" placeholder="Enter station name partially [Ex. Gudi]" class="form-control">
<button class="btn btn-primary" id='showResults' type="submit">Submit</button>
</div>
<div class="box-body table-responsive" id='datatable'>
</div>