[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

processing simple json

Posted on 2009-12-29
16
Medium Priority
?
583 Views
Last Modified: 2013-11-08
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?
0
Comment
Question by:Feivi99
  • 7
  • 5
  • 4
16 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 26142588
how are you calling that url?
0
 

Author Comment

by:Feivi99
ID: 26142689
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
 

Author Comment

by:Feivi99
ID: 26142738
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 83

Expert Comment

by:leakim971
ID: 26142739
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
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 26142744
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
 
LVL 82

Expert Comment

by:hielo
ID: 26142756
You mean I spent all that time writing all those details for nothing?
0
 
LVL 83

Expert Comment

by:leakim971
ID: 26142784
Great code hielo, I think, too, Feivi99 should give you some points for your time.
0
 
LVL 82

Expert Comment

by:hielo
ID: 26142790
>>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
 

Author Comment

by:Feivi99
ID: 26142791
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
 

Author Closing Comment

by:Feivi99
ID: 31671023
Good code, thanks.
0
 

Author Comment

by:Feivi99
ID: 26142798
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
 
LVL 83

Expert Comment

by:leakim971
ID: 26142804
OK, I understand. Thanks a lot for the come back. Have lot of fun!
0
 

Author Comment

by:Feivi99
ID: 26142807
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
 
LVL 83

Expert Comment

by:leakim971
ID: 26142812
No worries, it's the game!
0
 

Author Comment

by:Feivi99
ID: 26142942
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
 
LVL 83

Expert Comment

by:leakim971
ID: 26143091
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

868 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question