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

Question

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?

I doubt your request works in the first place. Check your browser for errors >> . You are trying to access it from a different domain — Sushanth --, Jun 13 '13 at 20:50
you need to use the jsonp to handle the cross-domain issue http://api.stackoverflow.com/1.1/questions?pagesize=20&jsonp=? — Daniel Moses, Jun 13 '13 at 20:54

Andrew Whitaker · Accepted Answer · 2013-06-13T21:04:11.040

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.

Brad M · Answer 2 · 2013-06-13T20:56:40.240

1

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>

edited Jun 13 '13 at 20:56

answered Jun 13 '13 at 20:48

Brad M

7,857
1
23
40

I know of the policy, but how does that allow other websites or web apps to pull in outside JSON? – Jody Heavener Jun 13 '13 at 20:50
2

@JodyHeavener They most likely are using `JSONP`, which is really just a script tag which is *not* subject to the same domain origin policy. – Brad M Jun 13 '13 at 20:50
I don't believe that's the problem, because from his comment it seems like his `` is being filled. If he's getting no data at all, then that's definitely his problem. – ayyp Jun 13 '13 at 20:51

score 0 · Answer 3 · edited May 23 '17 at 10:32

0

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/

edited May 23 '17 at 10:32

Community

1
1

answered Jun 13 '13 at 20:54

Justin

26,443
16
111
128

score 0 · Answer 4 · edited Jun 13 '13 at 21:17

0

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

edited Jun 13 '13 at 21:17

cmd

5,754
16
30

answered Jun 13 '13 at 20:54

Ajay Nayak

1

score -1 · Answer 5 · answered Jun 13 '13 at 20:47

-1

Not sure, but try

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

to make sure it's an appendable object.

answered Jun 13 '13 at 20:47

Neil JS Grump

669
5
3

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

5 Answers5