How do I receive a JSON file using AJAX and parse it using javascript?

Question

I'm trying to parse this very long and complicated JSON that foursquare gives me. This is my AJAX request:

    $.ajax({
      url: 'https://api.foursquare.com/v2/venues/explore',
      dataType: 'json',
      data: 'limit=7&ll='+latitude+','+longitude+'&client_id='+client_id+'&client_secret='+client_secret+'',
      async: false,
      success: getVenues(data)
});

getVenues is a function I'm making to sort through the JSON and display relevant stuff on the page. The first problem I'm having is that I don't know how to tell the success function that it should deal with the data received from the server - is this data stored in a variable somewhere? I'm currently doing getVenues(data) but it's telling me that 'data' is not a defined variable. Many online tutorials, however, seem to be happy with just doing a function to this mystical 'data' and theirs seem to work.

Next, I'm having trouble parsing the JSON itself. Here is a shortened version of the JSON I'm trying to deal with: http://pastie.org/4382619. How do I select the venue names and ID's etc and show them on the page?

Thanks

1) It should just be `success: getVenues` -- data should be the first parameter accepted in the getVenues function definition, and the server response is the first parameter to success callback (2) You can't do a cross-domain ajax request, so this won't work anyway. See if foursquare's api supports jsonp, then use that — nbrooks, Aug 03 '12 at 08:04
Thanks for the reply, `the success:getVenus` solved it for me. The request seems to be working, I am getting a JSON file from foursquare. What is a 'cross domain ajax request'? Thanks — Taimur, Aug 03 '12 at 08:08
Your domain isn't the same as that specified in the url, so the browser won't allow the request. If you still have problems, their API does support JSONP though: *To use JSONP, add a callback=XXX parameter to your request and we will respond with XXX(response). In the case of JSONP, we always return 200 (except in the case of 500’s) so the brower will allow the response to be handled by your code, but the true HTTP response code can be obtained from the code in the meta response.* — nbrooks, Aug 03 '12 at 08:10

score 3 · Answer 1 · answered Aug 03 '12 at 08:05

The tutorials you see online are likely declaring the success callback as an anonymous function. In those cases, data isn't being passed to a function, it's being declared as the parameter of that function. jQuery is nice enough to handle passing the response from the AJAX call to the success function as the first parameter, whatever you choose to name it (data just makes the most sense).

Additionally, if you specify dataType: 'json' on your $.ajax() call, jQuery will parse the JSON response before passing it to that function, ensuring that it's valid JSON and that you have an object to work with inside the function. If the response isn't valid JSON, the success callback won't be executed, and instead the error callback (if you've specified one) will be executed.

In your case, you're passing a function reference, so assuming your getVenuesfunction looks like this:

function getVenues(data) {
    // do something
}

then you can simply do:

success: getVenues

in the object you're passing to $.ajax().

score 3 · Accepted Answer · answered Aug 03 '12 at 08:05

3

You should do:

$.ajax({
    // some other code
    success: getVenues
});

You are telling ajax: "use getVenues function", not "use getVenus(data) value". As for second question:

var l = data.response.groups.length;
for (var i = 0; i < l; i++) {
    var group = data.response.groups[i];
    var k = group.items.length;
    for (var j = 0; j < k; j++) {
        var venue = group.items[j].venue;
        // use venue as you wish
    }
}

answered Aug 03 '12 at 08:05

freakish

54,167
9
132
169

Thanks a lot for the reply, how do I select the venue name, for example? Would it simply be `venue.name` or `venue[name]` or what? Thanks – Taimur Aug 03 '12 at 08:12
1

@Taimur Use `venue.name` or `venue["name"]`. If you use `venue[name]`, then JavaScript will try to use `name` variable as a key and it will give you `undefined` if `name` is not defined. – freakish Aug 03 '12 at 08:18

score 2 · Answer 3 · answered Aug 03 '12 at 08:06

The success property of the object in your ajax call just needs function name or an function object. You either give it just the name, like that:

    $.ajax({
      url: 'https://api.foursquare.com/v2/venues/explore',
      dataType: 'json',
      data: 'limit=7&ll='+latitude+','+longitude+'&client_id='+client_id+'&client_secret='+client_secret+'',
      async: false,
      success: getVenues
});

or you do this:

  $.ajax({
      url: 'https://api.foursquare.com/v2/venues/explore',
      dataType: 'json',
      data: 'limit=7&ll='+latitude+','+longitude+'&client_id='+client_id+'&client_secret='+client_secret+'',
      async: false,
      success: function(data) { getVenues(data) }
});

How do I receive a JSON file using AJAX and parse it using javascript?

3 Answers3

Linked