Question

I want to pull data from Google’s Suggest API and display it in my page (probably via the append function). I am confident with parsing JSON but not XML and as far as I can see Google do not offer this API in JSON.

How can I do this? Or, does anyone know how I can access this API in JSON? If anyone does that would be awesome!

The API address is: http://google.com/complete/search?q=google&output=toolbar

My current code is:

        $.ajax({
            type: "GET",
            url: "http://google.com/complete/search?q=google&output=toolbar",
            dataType: "xml",
            crossDomain: true,
            xhrFields: { withCredentials: true },
            success: function(xml) {
                $(xml).find('toplevel').each(function(){
                    var title = $(this).find('suggestion').text();
                    $('<b>'+title+'</b>').appendTo('#page-wrap');
                });
            }
        });

And the error I am getting is: XMLHttpRequest cannot load http://google.com/complete/search?q=wixiy&output=toolbar. Origin is not allowed by Access-Control-Allow-Origin.

Answer 1

Since, the API does not support JSON, so you can’t do it just in javascript as it won’t allow cross-domain requests by default. So, you will need an intermediate server-side page like a PHP file, which does the xml request from google and pass the xml to you.

Javascript

$.ajax({
    type: "GET",
    url: "getData.php?q=google&output=toolbar",
    dataType: "xml",
    success: function(xml){
        $(xml).find("CompleteSuggestion").each(function(){
            var suggestion = $( this ).find( 'suggestion' ).attr( 'data' );
            var num_queries = $( this ).find( 'num_queries' ).attr( 'int' );
            alert( suggestion + ' has ' + num_queries + ' queries.' );
        });
    }
});

PHP (getData.php) – This file is on the same server

$query = $_GET[ 'q' ];
$out = $_GET[ 'output' ];

header('Content-Type: text/xml');
echo file_get_contents('http://google.com/complete/search?q='.$query.'&output='.$out);

…or else, you can directly json_encode it and send JSON to your script, which can be easily parsed as well.

Hope this helps.