Jquery each on json api

Question

I am trying to get through the NY Times search API. As a result, 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"} 

(only two of the larger "results")

Here is the code I'm using (with remote API key)

 $.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 that this should work in order to cut through and print all the titles of the plots, but this is not so. Chrome dev utilities return two errors: "Uncaught SyntaxError: Unexpected token" and "Resource interpreted as a script, but passed with the MIME type text / plain"

I am still working on a JQuery JSON parser, so I'm sure I'm doing something simple wrong. Any help would be greatly appreciated.

Answer 1

I think you need the append method, not appendTo . AppendTo accepts a selector. Adding adds data to the currently selected item. I think you want to add something to your '#slippery' div, and not add '#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 2

Callback $. each one actually takes 2 parameters, indexInArray and valueOfElement , so when you are in closure, you need to reference these parameters as follows:

 $.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 3

It turns out that the problem is due to a syntax error, and the reason for this is because the NYTimes API will not return JSONP. You need to wrap it manually. Which is a problem for another day.

Answer 4

Try this form:

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

Answer 5

It looks like you are using jsonp, not just json. You will need to modify your request and use $.ajax() with dataType: "jsonp" .

In 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 6

You can skip using the $.each() function and just use the regular for loop. See element No. 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 faster to complete.