processing simple json

Hi, just starting out with json here.

I'm working with the suggestqueries.google.com api where, for example, the following request:

http://suggestqueries.google.com/complete/search?output=firefox&hl=en&q=pan

gives the following result:

["pan",["pandora","panera bread","panasonic","panera bread menu","pandorum","panera bread locations","panda express","pandora bracelets","pancreatitis","pandemic 2"]]

I want to make each result the innertext of a div with javascript. How do I do this?
Feivi99Asked:
Who is Participating?
 
hieloConnect With a Mentor Commented:
read comments in code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<input id="q" name="q" value=""/>
<button id="b" name="b">Search</button>
<div id="r"></divl>
<script type="text/javascript">
/*
format/indent the results of that sample you posted so you can see how the data is structured:

["pan",[
		["pandora","25,500,000 results","0"]
		,["panera bread","1,270,000 results","1"]
		,["panasonic","115,000,000 results","2"]
		,["panera bread menu","1,300,000 results","3"]
		,["pandorum","10,400,000 results","4"]
		,["panera bread locations","2,070,000 results","5"]
		,["panda express","2,550,000 results","6"]
		,["pandora bracelets","1,990,000 results","7"]
		,["pancreatitis","3,110,000 results","8"]
		,["pandemic 2","9,950,000 results","9"]
	]
]

clearly you have a two element array:
The first element contains the string "pan"
The second element is an array with 10 elements. Each of these elements is a sub array.
In each of these subarrays, you are interested in the first element.

So, starting from the very top, to get pandora you need to retrieve
index 1 followed by row 0, followed by Element 0, etc:
[1][0][0] =>pandora
[1][1][0] =>panera bread
[1][2][0] =>panasonic
...

*/
var google = {
    ac: {
        h: function(r) {
	   	var str="";
           for(var i=0, limit=r[1].length; i < limit; ++i)
		 {
		 	str+="<div>"+(r[1][i][0])+"</div>";
		 }
		 document.getElementById("r").innerHTML=str;
        }
    }
};

var obj =
{
  init : function()
  {
    obj.q = document.getElementById('q');
    obj.b = document.getElementById('b');
    obj.b.onclick = obj.pingSearch;
  },
  pingSearch : function()
  {
    if (obj.q.value)
    {
      obj.s = document.createElement('script');
      obj.s.type ='text/javascript';
      obj.s.charset ='utf-8';
      obj.s.src = 'http://suggestqueries.google.com/complete/search?hl=en&q=' + obj.q.value;
      document.getElementsByTagName('head')[0].appendChild(obj.s);
    }
  }
};
window.onload = function()
{
    obj.init();
};
</script>
</body>
</html>

Open in new window

0
 
hieloCommented:
how are you calling that url?
0
 
Feivi99Author Commented:
Ok, I just found out that this url cant be processed, because there is no callback function.

Instead, the correct format to use is:

http://suggestqueries.google.com/complete/search?&hl=en&q=pan

which gives the following results:

window.google.ac.h(["pan",[["pandora","25,500,000 results","0"],["panera bread","1,270,000 results","1"],["panasonic","115,000,000 results","2"],["panera bread menu","1,300,000 results","3"],["pandorum","10,400,000 results","4"],["panera bread locations","2,070,000 results","5"],["panda express","2,550,000 results","6"],["pandora bracelets","1,990,000 results","7"],["pancreatitis","3,110,000 results","8"],["pandemic 2","9,950,000 results","9"]]])

The code I'm using goes as follows:

<body>
<input id="q">>
<button id="b">Search</button>
<div id="r"></divl>
<script type="text/javascript">

var google = {
    ac: {
        h: function() {
           
        }
    }
};

var obj =
{
  init : function()
  {
    obj.q = document.getElementById('q');
    obj.b = document.getElementById('b');
    obj.b.onclick = obj.pingSearch;
  },
  pingSearch : function()
  {
    if (obj.q.value)
    {
      obj.s = document.createElement('script');
      obj.s.type ='text/javascript';
      obj.s.charset ='utf-8';
      obj.s.src = 'http://suggestqueries.google.com/complete/search?hl=en&q=' + obj.q.value;
      document.getElementsByTagName('head')[0].appendChild(obj.s);
    }
  }
};
window.onload = function()
{
    obj.init();
};
</script>
</body>

So how do I populate the "r" div with the search results (without the other parameters; just the "pandora, panera bread," etc)
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Feivi99Author Commented:
Ok, I found the solution.

I first created the window.google.ac object with the "h(param)" function. Then the correct way to manipulate the json results is with param[1][x][y].

Thanks
0
 
leakim971PluritechnicianCommented:
Hello Feivi99,

Seems you post some days ago the same request for Yahoo "Related Suggestion" no ?

Have a look to this page : http://loda.jp/script/?id=305
(first post)

callback function : createSuggest (which call displaySuggest which call others functions...)

Regards.
0
 
hieloCommented:
You mean I spent all that time writing all those details for nothing?
0
 
leakim971PluritechnicianCommented:
Great code hielo, I think, too, Feivi99 should give you some points for your time.
0
 
hieloCommented:
>>Then the correct way to manipulate the json results is with param[1][x][y].
No, the suggestions are always at index  zero of the inner-most elemtn. So strictly speaking that should read:
Then the correct way to manipulate the json results is with param[1][x][0].
0
 
Feivi99Author Commented:
I submitted my last post before hielo did his. But I agree that his work deserves the points, especially since it's the correct solution :-)
0
 
Feivi99Author Commented:
Good code, thanks.
0
 
Feivi99Author Commented:
Leakim 971,

when comparing the two, Google seemed to have the superior results. The problem I had was that my initial Google urls didnt allow callbacks. Etc etc.
0
 
leakim971PluritechnicianCommented:
OK, I understand. Thanks a lot for the come back. Have lot of fun!
0
 
Feivi99Author Commented:
Leakim 971, I owe you an apology. I thought the link you posted was a link to MY previous post. Now I see you have what seems a different viable solution. I should have awarded part of the points to you :-(

My apologies.
0
 
leakim971PluritechnicianCommented:
No worries, it's the game!
0
 
Feivi99Author Commented:
Well then, if you're still in the mood of playing, here's another 500p question :-)

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/JSON/Q_25009511.html
0
 
leakim971PluritechnicianCommented:
Thanks for the challenge. Seems to be a good one. I'm going to sleep, I will do my best "tommorow", if you or anyone not fully answer it.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.