jquery each on a JSON api

Question

I'm trying to loop through the NY Times' search API. The resulting JSON looks like this:

{"offset" : "0" , "results" : [{"body" : "NEW ORLEANS — The hemorrhaging well that has spilled millions of gallons of oil into the Gulf of Mexico remained capped for a second day Friday, providing some hope of a long-term solution to the environmental disaster. Live video from the seabed Friday morning showed that all was quiet around the top of the well, suggesting the test" , "byline" : "By CAMPBELL ROBERTSON and HENRY FOUNTAIN" , "date" : "20100717" , "title" : "Oil Spill Capped for a Second Day, Offering Some Hope" , "url" : "http:\/\/www.nytimes.com\/2010\/07\/17\/us\/17spill.html"} , {"body" : "GALVESTON, Tex. — The crayons and paper were out, but not too many children made it to family day at the Ocean Star Offshore Drilling Rig and Museum . Granted, the exhibits of pipelines and seismic vessels may have been over the heads of many grade-schoolers. And despite a few cheerful displays about marine life around rigs and all the bounty" , "byline" : "By MELENA RYZIK" , "date" : "20100716" , "title" : "Texas Remains Stoic as Spill Hits Its Shores" , "url" : "http:\/\/www.nytimes.com\/2010\/07\/16\/us\/16galveston.html"}

(that's just two in the larger 'results' set)

Here's the code I'm using (with my API key removed)

$.getJSON('http://api.nytimes.com/svc/search/v1/article?format=json&query=oil%2C+bp%2C+gulf+of+mexico&api-key=KEY_REMOVED'+'&callback=?', function(e) {
   $.each(e.results, function() {
      $('#slippery').appendTo(
         '<h2>' + this.title + '</h2>'
      );
   });
});

I feel like this should work to loop through and print all the story titles, but it's not. The Chrome dev tools return two errors: "Uncaught SyntaxError: Unexpected token" and "Resource interpreted as script but transferred with MIME type text/plain"

I'm still working my way through Jquery parsing of JSON, so I'm sure I'm doing something simple incorrectly. Any help would be much appreciated.

Answer 1

The callback in the $.each actually accepts 2 params, indexInArray and valueOfElement so when you are in the closure you need to reference those params like so:

$.getJSON('http://api.nytimes.com/svc/search/v1/article?format=json&query=oil%2C+bp%2C+gulf+of+mexico&api-key=KEY_REMOVED'+'&callback=?', function(e) {
   $.each(e.results, function(indexInArray, valueOfElement) {
      $('#slippery').append(
         '<h2>' + valueOfElement.title + '</h2>'
      );
   });
});

Answer 2

I think you want the append method, not appendTo. AppendTo takes a selector. Append adds data to the currently selected item. I think you want to add things to your '#slippery' div, not append '#slippery' to something.

$.getJSON('http://api.nytimes.com/svc/search/v1/article?format=json&query=oil%2C+bp%2C+gulf+of+mexico&api-key=KEY_REMOVED'+'&callback=?', function(e) {
   $.each(e.results, function() {
      $('#slippery').append(
         '<h2>' + this['title'] + '</h2>'
      );
   });
});

Answer 3

Try this form:

$(obj).each(function(iteration, value) { /* ... */ });

Answer 4

It appears that you are actually using jsonp and not just json. You will need to change your request around and instead use $.ajax() with dataType: "jsonp" amongst other things.

From the jQ API docs:

JSONP

If the URL includes the string "callback=?" in the URL, the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

Answer 5

You might want to skip using the $.each() function and just use a regular for loop. See item #6 for an explanation.

Basically,

$.getJSON('http://api.nytimes.com/svc/search/v1/article?format=json&query=oil%2C+bp%2C+gulf+of+mexico&api-key=KEY_REMOVED'+'&callback=?', function(e) {
  $slippery = $('#slippery');
  for ($i = 0, $j = e.results.length; $i < $j; $i++) {
      $slippery.appendTo('<h2>' + e.results[$i].title + '</h2>');
  }
});

will be quicker to execute.

Answer 6

Turns out the issue was the Syntax Error, and the reason for it is that the NYTimes API won't return JSONP. Have to wrap it manually. Which is an issue for another day.