Question

I have a guardian json data feed that I want to pull into my page online.

http://content.guardianapis.com/world/cuba?format=json&show-fields=trail-text%2Cheadline&order-by=newest&api-key=c3rr449rqqebmuxua9k5mdcz

I have used this javascript but nothing seems to be working to grab the right content from the json;

$(document).ready(function() {  
$.ajax({
    type: "GET",
    dataType: "jsonp",
    cache: false,
    url: "http://content.guardianapis.com/world/cuba?format=json&show-fields=trail-text%2Cheadline&order-by=newest&api-key=c3rr449rqqebmuxua9k5mdcz",
    success: function(data) {
        for (var i = 0; i < 12; i++) {
        $("#cuban-news").append("<div class='guardian'><a target='_blank' href='" + webTitle + "'>Link</a></div>");
        }
        console.log(data);
    }
});

});

This is not throwing anything in terms of errors.

Am I better using a js service like backbone or underscore?

Any help would be amazing on this.

Answer 1

Use

data.response.results[i].webTitle 

instead of

webTitle 

error was
Uncaught ReferenceError: webTitle is not defined

$(document).ready(function() {  
$.ajax({
    type: "GET",
    dataType: "jsonp",
    cache: false,
    url: "http://content.guardianapis.com/world/cuba?format=json&show-fields=trail-text%2Cheadline&order-by=newest&api-key=c3rr449rqqebmuxua9k5mdcz",
    success: function(data) {
        for (var i = 0; i < data.response.results.length; i++) {
        $("#cuban-news").append("<div class='guardian'><a target='_blank' href='" 
            + data.response.results[i].webTitle + "'>Link</a></div>");
            }
            console.log(data);
        }
    });
 });​

JSFiddle