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.

• Dan Sinker: note: corrected a typo in my code (append instead appendTo), but didn't fix the problem
• Powerlord: As a side note, this is a JSONP request, not just a JSON request.

Answer 1

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

• Dan Sinker: You're right on that, but it's still not working. Changed back to append, and still nada.
• g.d.d.c: @dan-sinker - You might try using this['title'] as an alternate way to access the property. Otherwise, try logging or tracing this and see what it contains. If you change it to something like $('#slippery').append('<h2>Test</h2>'); do you get the correct number of H2's? Might be an issue with the return data format.

Answer 2

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

• SLaks: Wrong. You don't need to use those parameters. This is not the issue.
• Powerlord: Wouldn't $(this) be a syntax error? this should an associative array, not a selector or DOM element.
• user113716: @R. Bemrose is correct. When you wrap it into a jQuery object, you are trying to look up the title attribute of the object, which does not exist.

Answer 3

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.

• bonhoffer: let me know if you figured this out

Answer 4

Try this form:

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

Answer 5

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.

• user113716: I would imagine that jsonp is desired since the request is presumably being made to an external domain. Also, the OP is getting a result, it's just not getting parsed.

Answer 6

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.