Google Search API returns "undefined"

Question

I have a jQuery script that queries the Google AJAX Search API and returns results. However, all the results are currently coming back as "undefined".

How can I fix this?

My jQuery code is:

$(document).ready(function(){
        var resultsDiv = $('#resultsDiv');

        $.getJSON('http://ajax.googleapis.com/ajax/services/search/web?v=1.0&callback=jsonp',{q:"google",rsz:8,start:0},function(r){
            var results = r.responseData.results;
                var pageContainer = $('<div>',{className:'pageContainer'});
                for(var i=0;i<results.length;i++){
                    pageContainer.append('<div class="webResult"><h2><a href="'+r.responseData.results.unescapedUrl+'" target="_blank">'+r.title+'</a></h2><p>'+r.responseData.results.content+'</p><a href="'+r.responseData.results.unescapedUrl+'" target="_blank">'+r.responseData.results.visibleUrl+'</a></div>');
                }
                resultsDiv.empty();
                pageContainer.append('<div class="clear"></div>').hide().appendTo(resultsDiv).fadeIn('slow');
        });
});

You need to use jsonp http://stackoverflow.com/questions/2067472/please-explain-jsonp — wirey00, Sep 20 '12 at 19:00

wirey00 · Answer 1 · 2012-09-20T19:28:43.427

You need to use jsonp since it's returning a jsonp response

$.ajax({
  type: "GET",
  url: "http://ajax.googleapis.com/ajax/services/search/web?v=1.0", 
  data: {q:"google",rsz:8,start:0},
  dataType: 'jsonp', //<---
  success: function(r){
        var results = r.responseData.results;
            var pageContainer = $('<div>',{className:'pageContainer'});
            for(var i=0;i<results.length;i++){
                pageContainer.append('<div class="webResult"><h2><a href="'+r.responseData.results.unescapedUrl+'" target="_blank">'+r.title+'</a></h2><p>'+r.responseData.results.content+'</p><a href="'+r.responseData.results.unescapedUrl+'" target="_blank">'+r.responseData.results.visibleUrl+'</a></div>');
            }
            resultsDiv.empty();
            pageContainer.append('<div class="clear"></div>').hide().appendTo(resultsDiv).fadeIn('slow');
    }
});

http://jsfiddle.net/bYSZg/

EDIT:

Here's why its displaying undefined.. you are getting your data correctly

pageContainer.append('<div class="webResult"><h2><a href="'+r.responseData.results.unescapedUrl+'" target="_blank">'+r.title+'</a></h2><p>'+r.responseData.results.content+'</p><a href="'+r.responseData.results.unescapedUrl+'" target="_blank">'+r.responseData.results.visibleUrl+'</a></div>');

should be

pageContainer.append('<div class="webResult"><h2><a href="'+r.responseData.results[i].unescapedUrl+'" target="_blank">'+r.responseData.results[i].title+'</a></h2><p>'+r.responseData.results[i].content+'</p><a href="'+r.responseData.results[i].unescapedUrl+'" target="_blank">'+r.responseData.results[i].visibleUrl+'</a></div>');

http://jsfiddle.net/XhuH6/1/

are you using chrome? if so expand the error to pinpoint what is causing it — wirey00, Sep 20 '12 at 19:12
See my updated answer.. you were incorrectly getting the data out of the jsonp response — wirey00, Sep 20 '12 at 19:29

score 0 · Answer 2 · answered Sep 20 '12 at 19:24

The result of the Ajax request is: jsonp({"responseData":... }); not {"responseData":... }

This code is evaluated at the time the 'success' callback is called. I think all you have to do is to define a new function with name jsonp as follows:

function jsonp(r){
      var results = r.responseData.results;
      ....
}

Google Search API returns "undefined"

2 Answers2