HOW TO work with a JSON/JSONP feed locally


When you're working with a JSONP feed  like the one returned by Twitter Search API or Google News, the different results that show up each time may distract you from the functionality that you're building. You can instead work with a copy of the JSON resultset locally and hook up the code to the actual JSONP feed when you're done.

A JSONP feed is just JSON-formatted response wrapped in a function call. You can grab the JSONP content generated by an API by going to the Network Tab within Developer Tools (F12 keyboard shortcut) of Chrome or IE or Firebug within Firefox.

When a JSONP feed is called through jQuery, it will look something like this -
jQuery17109422175763174891_1337695981767({json})

To work with the dynamically generated JSON, we need the content within the brackets - {json}

Save that content within a text file & give it some name & a ".js" extension. To use the JSON content locally, specify the file name as the first parameter to the $.getJSON method -

$(document).ready(function(){
    $.getJSON('tsearch.js', function(response){
      for(var i=0;i<response.results.length; i++){
      $('#tweets').append("<li>" + response.results[i].text + "</li>");
    }});
});

The above example refers to  JSON returned by Twitter Search API.

Also see:

HOW TO show expanded form of shortened URL within a tweet using Twitter API 
HOW TO convert a RSS feeed to a JSONP feed on the fly

Comments