JSONP using .getJSON is returning undefined

Question

I'm trying out an exercise in Learning jQuery 4th edition by Karl Swedburg for Ajax, and more specifically JSONP.

My code is

$(document).ready(function(){
var url='https://api.github.com/users/jquery/repos';
$.getJSON(url + '?callback=?',function(data){
  var content='';
  $.each(data,function(index,item){
    content +='<div class="userdata">';
    content +='<div class="username">'+item.id+'</div>';
    content +='<div class="username">'+item.name+'</div>';
    content +='<div class="userurl">'+item.url+'</div>';
    content +='</div>';
  });
  $('#dictionary').append(content);

});
});

I've checked the developer tools and my request is returning status 200

and an extract of the data returned from the request is as shown below

{
  "id": 5999890,
  "name": "2012-dev-summit",
  "full_name": "jquery/2012-dev-summit",
  //more stuff
}

I've checked and double checked my code and can't seem to figure out why is it returning undefined.

EDIT:Added what is appended

undefined
undefined
undefined
undefined
undefined
undefined

i get 6 undefined,which would equate to 2 iterations seeing as outputting 3 items per round, ie. id,name and url.

Subash Selvaraj · Accepted Answer · 2014-04-12 11:03:26Z

1

Try the below. You are getting the result in result.data object. Not in result object.

$(document).ready(function(){
var url='https://api.github.com/users/jquery/repos';
$.getJSON(url + '?callback=?',function(result){
  var content='';
  var data = result.data;
  $.each(data,function(index,item){
    content +='<div class="userdata">';
    content +='<div class="username">'+item.id+'</div>';
    content +='<div class="username">'+item.name+'</div>';
    content +='<div class="userurl">'+item.url+'</div>';
    content +='</div>';
  });
  $('#dictionary').append(content);

});

});

FIDDLE

answered Apr 12, 2014 at 11:03

Subash Selvaraj

3,3871 gold badge16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kenneth .J Over a year ago

Your code works, but why exactly does it work? What do you mean by im getting the result in result.data.object and not result.object?

Subash Selvaraj Over a year ago

You are directly looping through the result from getJSON callback in your code(data). But the actual data lies inside data.data in your code, In my code inside result.data. So you need to loop through the result.data to access the result objects. Hope it helps.

Sridhar R · Accepted Answer · 2014-04-12 11:02:36Z

0

Try this

$(document).ready(function(){
var url='https://api.github.com/users/jquery/repos';
$.getJSON(url + '?callback',function(data){
  var content='';
  $.each(data,function(index,item){
    content +='<div class="userdata">';
    content +='<div class="username">'+item.id+'</div>';
    content +='<div class="username">'+item.name+'</div>';
    content +='<div class="userurl">'+item.url+'</div>';
    content +='</div>';
  });
  $('#dictionary').append(content);

});
});

DEMO

answered Apr 12, 2014 at 11:02

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

1 Comment

Kenneth .J Over a year ago

Why does changing ?callback=? to ?callback make it work? From the docs, it says that the string has to contain callback=? for it to work, so why does it changing it make it work in this case?

Collectives™ on Stack Overflow

JSONP using .getJSON is returning undefined

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related