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

Answer 1

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

Answer 2

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().

Answer 3

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) }
});