CODEWITHSUNDEEP
jqueryjson
Jody Heavener
Jody Heavener

Reputation: 2874

Can't get data from Stack Overflow JSON request in JS

All I'm trying to do is display links to the 20 most recent Stack Overflow Questions, using jQuery to grab the JSON data.

My jQuery...

$.getJSON('http://api.stackoverflow.com/1.1/questions?pagesize=20', function(data) {
    $.each(data.questions, function(i,data){
        var question_list = '<a href="#">' + data.title + '</a>'; 
        $("div.questions").append(question_list);
    })
});

And of course my HTML...

<div class=questions></div>

Can anyone help with what I'm doing wrong?

Upvotes: 3

Views: 524

Answers (5)

Ajay Nayak
Ajay Nayak

Reputation: 1

Please make sure your data question_list is correct before appending.

var question_list = '<a href="#">' + data.title + '</a>'; 

// View the question_list in fire bug here by console print and make sure 
// you are correct up to this place.

$("div.questions").append(question_list);

Upvotes: 0

Andrew Whitaker
Andrew Whitaker

Reputation: 126072

The StackOverflow API uses JSONP:

All API responses are JSON, we do support JSONP with the jsonp query parameter.

(emphasis mine)

So you'll need to convert your AJAX call to use $.ajax and properly populate the options to make the request:

$.ajax({
    url: 'http://api.stackoverflow.com/1.1/questions',
    dataType: 'jsonp',  // let jQuery know this is a JSONP request.
    jsonp: 'jsonp',     // the callback parameter SO uses is called 'jsonp'
    data: {             // options that will get placed in the query string
        pagesize: 20
    },
    success: function (data) {
        $.each(data.questions, function (i, data) {
            var question_list = '<li><a href="#">' + data.title + '</a></li>';
            $(".questions").append(question_list);
        })
    }
});

Example: http://jsfiddle.net/QydkZ/1/

I tweaked the success callback to do something a little more readable, but the concept is the same.

As a side note, the version of the StackOverflow API you're using is deprecated. This is how you would write this against the 2.1 (current version) of the API:

$.ajax({
    url: 'http://api.stackexchange.com/2.1/questions',
    dataType: 'jsonp',
    jsonp: 'jsonp',
    data: {
        pagesize: 20,
        site: 'stackoverflow'
    },
    success: function (data) {
        $.each(data.items, function (i, data) {
            var question_list = '<li><a href="#">' + data.title + '</a></li>';
            $(".questions").append(question_list);
        })
    }
});

Example: http://jsfiddle.net/k4AnW/1/

I'd highly recommend using the current version of the API instead.

Upvotes: 3

Brad M
Brad M

Reputation: 7898

Per the jQuery documentation...

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol. Script and JSONP requests are not subject to the same origin policy restrictions.

Your ajax request from xyz.com can't access data from stackoverflow.com

XMLHttpRequest cannot load http://api.stackoverflow.com/1.1/questions?pagesize=20. Origin http://mytest.com is not allowed by Access-Control-Allow-Origin.

What you can use.

<script src="http://api.stackoverflow.com/1.1/questions?jsonp=yourCallback"></script>
<script>function yourCallback(JSONdata) { }</script>

Upvotes: 1

Justin
Justin

Reputation: 27331

You need to use JSONP What is JSONP all about?

From the jQuery docs:

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

http://api.jquery.com/jQuery.getJSON/

Upvotes: 0

Neil JS Grump
Neil JS Grump

Reputation: 689

Not sure, but try

$('div.questions').append($(question_list))

to make sure it's an appendable object.

Upvotes: -1

Related Questions