Accessing JSON in url

Question

So I'm not sure how to do this but I want to get the JSON in this url and then append article.articleText to a <div> with the id of output

http://api.trove.nla.gov.au/newspaper/2184103?key=jja10ssv4950uh65&encoding=json&include=articletext

Edit to show what I have tried:

var apiKey = "jja10ssv4950uh65"; 
                $("#searchbtn").click(function(e) {
                    e.preventDefault();
                    var searchTerm = getRandomVideo();
                    var url = "http://api.trove.nla.gov.au/newspaper/" + searchTerm + "?key=" + apiKey + "&encoding=json&include=articletext"

                    $.getJSON(url, function(data) {
                        $('#output').empty();
                        $("#output").append("<p>" + data.article.articleText +"</p>");
                    });
                });

is that your real API Key ? 0.o... all exposed and naked for all to see... — crushman, Oct 26 '15 at 03:13

score 0 · Answer 1 · edited May 23 '17 at 11:53

XMLHttpRequest cannot load http://api.trove.nla.gov.au/newspaper/2184103?key=jja10ssv4950uh65&encoding=json&include=articletext. No Access-Control-Allow-Origin header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

For this you need to add headers to your response body, so that it is accessible.

Alternate solution using JSONP

var apiKey = "jja10ssv4950uh65"; 

$("#searchbtn").click(function(e) {
    e.preventDefault();
    var searchTerm = getRandomVideo();
    var url = "http://api.trove.nla.gov.au/newspaper/" + searchTerm + "?key=" + apiKey + "&encoding=json&include=articletext";

    $.ajax({
        url: url,
        dataType: 'JSONP',
        jsonpCallback: 'callback',
        type: 'GET',
        success: function (data) {
            $('#output').empty();
            console.log(data);
            $("#output").append("<p>" + data.article.articleText +"</p>");
        }
    });
});

Accessing JSON in url

1 Answers1