Jquery .ajax get request for a json response

Question

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.ajax({
            type: 'GET',
            url:"http://bustime.mta.info/api/siri/vehicle-monitoring.json", 
            data: {key: '',
                OperatorRef:'MTA%20NYCT',
                LineRef:'B54',
                VehicleRef:'9531'   },
            dataType: 'json',
            async: false,
        success: function(result){
            $("#div1").html(result);
        }});
    });
});
</script>
</head>
<body>

<div id="div1">Let jQuery AJAX Change This Text</div>

<button>Get External Content</button>

</body>

</html>

Hi, I am new to Javascript & Jquery so please forgive me for any newbie mistake. What I am trying to do here is send a get request to the mta api(http://bustime.mta.info/wiki/Developers/SIRIVehicleMonitoring ) and simply just print the json response once the user clicks a button. The code is not printing out anything when the button clicks. Can anyone detect the problem with the code above? I would appreciate it a lot.

Look at your browser's developer tools. Look at the JavaScript console. Does it report any errors? Look at the Net tab. Is the request being made? Does it get a response? Do they contain the data you expect? You have a success function, add an error function. — Quentin
– Quentin, Commented Apr 28, 2015 at 21:56
instead of " $("#div1").html(result);" write alert(result); and see what you get — Scott Selby
– Scott Selby, Commented Apr 28, 2015 at 21:57
You might want to remove that key from your question, since everyone can use it now. — Jon Koops
– Jon Koops, Commented Apr 28, 2015 at 22:02
Maybe blocked because its a cross-origin request. F12 and tell us what the console says (are there any errors?) — garryp
– garryp, Commented Apr 28, 2015 at 22:04

Paul Fitzgerald · Accepted Answer · 2015-04-28 22:29:22Z

2

You need to change the dataType to jsonp to avoid the CORS restriction.

JSONP is a technique used in JavaScript programs running in web browsers to request data from a server in a different domain. Typically this is prohibited by web browsers because of the same-origin policy. Wikipedia provides a far better description than I possibly could. See here. When it comes to making GET requests to APIs, this is something you will encounter regularly, so it's worth knowing.

The jquery code allows you to view the JSON object in the console, which you can then manipulate as you please. The way I have currently included will change the div to the timestamp as returned by the JSON object. This jsfiddle should demo what you are looking for http://jsfiddle.net/zmxv2j7q/

        $(document).ready(function(){
          $("button").click(function(){
           $.ajax({
            type: 'GET',
            url:"http://bustime.mta.info/api/siri/vehicle-monitoring.json", 
            data: {key: '##################',
                OperatorRef:'MTA%20NYCT',
                LineRef:'B54',
                VehicleRef:'9531'   },
            dataType: 'jsonp',
            async: false,
            success: function(result){
            console.log(result.Siri)
            $("#div1").html(result);
            $("#div1").html(result.Siri.ServiceDelivery.ResponseTimestamp)
        }});
    });
});

edited Apr 28, 2015 at 22:29

answered Apr 28, 2015 at 22:12

Paul Fitzgerald

12.1k4 gold badges45 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Alan H Over a year ago

Thank you. I now understand why I have to use jsonp instead of json for the dataType. I am planning on saving the latitude and longitude values returned into variables and playing with them. You asked me if I know how to work with the JSON response. Is there a specific way of receiving the response that you would recommend?

Paul Fitzgerald Over a year ago

@AlanH I find the best way is to console.log the result that is returned, and play with it from there. Do you understand how dot notation works to access properties of a JSON object?

Alan H Over a year ago

No, I was actually looking at how you accessed responseTimeStamp and was surprised at how easy that was. ( I thought some severe parsing was needed..) By looking at the way you were using the dot notation, I thought Siri.ServiceDelivery.VehicleMonitoringDelivery.VehicleActivity.MonitoredVehicleJourney.VehicleLocation.Longitude would give me the Longitude I am looking for, but it's not returning anything. Is there any other mistake that I'm making here?

Paul Fitzgerald Over a year ago

@AlanH so I had a look at registering for the API so I could give you better guidance, but it was not working. I will try again after this, but the reason your attempt above is not working is because you are hitting arrays which do not work with the dot notation, but work on the basis of array[0] for the first item in array etc. So if you look at the object that is returned when you hit the array part use this, and when it returns to the object use dot notation again. Make sense?

Alan H Over a year ago

I get it. Thank you very much Paul. It seems like I need to sit down and take some time to study this.

|

Collectives™ on Stack Overflow

Jquery .ajax get request for a json response

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related