NGTLD
asked on
Parse JSON from google local search api with javascript
HI,
I am wondering if anyone can help me figure out how to parse JSON with javascript. I have read numerous online resources and am not getting it. I have some data in JSON format from google's local search api and want to extract the addresses. I am attaching a data sample. Also I do not want to use jquery, just pure javascript
Thanks
I am wondering if anyone can help me figure out how to parse JSON with javascript. I have read numerous online resources and am not getting it. I have some data in JSON format from google's local search api and want to extract the addresses. I am attaching a data sample. Also I do not want to use jquery, just pure javascript
Thanks
{"responseData": {"results":[{"GsearchResultClass":"GlocalSearch","viewportmode":"explicit","listingType":"local","lat":"37.322949","lng":"-122.049279","accuracy":"8","title":"Una Mas Mexican Grill","titleNoFormatting":"Una Mas Mexican Grill","ddUrl":"http://www.google.com/maps?source\u003duds\u0026daddr\u003d21267+Stevens+Creek+Boulevard%2C+Cupertino%2C+CA+%28Una+Mas+Mexican+Grill%29+%4037.322949%2C-122.049279\u0026saddr\u003d95014","ddUrlToHere":"http://www.google.com/maps?source\u003duds\u0026daddr\u003d21267+Stevens+Creek+Boulevard%2C+Cupertino%2C+CA+%28Una+Mas+Mexican+Grill%29+%4037.322949%2C-122.049279\u0026iwstate1\u003ddir%3Ato","ddUrlFromHere":"http://www.google.com/maps?source\u003duds\u0026saddr\u003d21267+Stevens+Creek+Boulevard%2C+Cupertino%2C+CA+%28Una+Mas+Mexican+Grill%29+%4037.322949%2C-122.049279\u0026iwstate1\u003ddir%3Afrom","streetAddress":"21267 Stevens Creek Boulevard","city":"Cupertino","region":"CA","country":"United States","staticMapUrl":"http://maps.google.com/maps/api/staticmap?maptype\u003droadmap\u0026format\u003dgif\u0026sensor\u003dfalse\u0026size\u003d150x100\u0026zoom\u003d13\u0026markers\u003d37.322949%2C-122.049279","url":"http://www.google.com/maps/place?source\u003duds\u0026q\u003dfast+food\u0026cid\u003d9250327714397929842","content":"","maxAge":604800,"phoneNumbers":[{"type":"","number":"(408) 865-1115"}],"addressLines":["21267 Stevens Creek Boulevard","Cupertino, CA"]},{"GsearchResultClass":"GlocalSearch","viewportmode":"explicit","listingType":"local","lat":"37.312568","lng":"-122.031847","accuracy":"8","title":"Taco Bell","titleNoFormatting":"Taco Bell","ddUrl":"http://www.google.com/maps?source\u003duds\u0026daddr\u003d10710+South+De+Anza+Boulevard%2C+Cupertino%2C+CA+%28Taco+Bell%29+%4037.312568%2C-122.031847\u0026saddr\u003d95014","ddUrlToHere":"http://www.google.com/maps?source\u003duds\u0026daddr\u003d10710+South+De+Anza+Boulevard%2C+Cupertino%2C+CA+%28Taco+Bell%29+%4037.312568%2C-122.031847\u0026iwstate1\u003ddir%3Ato","ddUrlFromHere":"http://www.google.com/maps?source\u003duds\u0026saddr\u003d10710+South+De+Anza+Boulevard%2C+Cupertino%2C+CA+%28Taco+Bell%29+%4037.312568%2C-122.031847\u0026iwstate1\u003ddir%3Afrom","streetAddress":"10710 South De Anza Boulevard","city":"Cupertino","region":"CA","country":"United States","staticMapUrl":"http://maps.google.com/maps/api/staticmap?maptype\u003droadmap\u0026format\u003dgif\u0026sensor\u003dfalse\u0026size\u003d150x100\u0026zoom\u003d13\u0026markers\u003d37.312568%2C-122.031847","url":"http://www.google.com/maps/place?source\u003duds\u0026q\u003dfast+food\u0026cid\u003d8058705447805293815","content":"","maxAge":604800,"phoneNumbers":[{"type":"","number":"(408) 255-4536"}],"addressLines":["10710 South De Anza Boulevard","Cupertino, CA"]},{"GsearchResultClass":"GlocalSearch","viewportmode":"explicit","listingType":"local","lat":"37.326276","lng":"-122.014434","accuracy":"8","title":"Cupertino Square: Burger King","titleNoFormatting":"Cupertino Square: Burger King","ddUrl":"http://www.google.com/maps?source\u003duds\u0026daddr\u003d10123+N+Wolfe+Rd+%23+Sc5%2C+Cupertino%2C+CA+%28Cupertino+Square%3A+Burger+King%29+%4037.326276%2C-122.014434\u0026saddr\u003d95014","ddUrlToHere":"http://www.google.com/maps?source\u003duds\u0026daddr\u003d10123+N+Wolfe+Rd+%23+Sc5%2C+Cupertino%2C+CA+%28Cupertino+Square%3A+Burger+King%29+%4037.326276%2C-122.014434\u0026iwstate1\u003ddir%3Ato","ddUrlFromHere":"http://www.google.com/maps?source\u003duds\u0026saddr\u003d10123+N+Wolfe+Rd+%23+Sc5%2C+Cupertino%2C+CA+%28Cupertino+Square%3A+Burger+King%29+%4037.326276%2C-122.014434\u0026iwstate1\u003ddir%3Afrom","streetAddress":"10123 N Wolfe Rd # Sc5","city":"Cupertino","region":"CA","country":"United States","staticMapUrl":"http://maps.google.com/maps/api/staticmap?maptype\u003droadmap\u0026format\u003dgif\u0026sensor\u003dfalse\u0026size\u003d150x100\u0026zoom\u003d13\u0026markers\u003d37.326276%2C-122.014434","url":"http://www.google.com/maps/place?source\u003duds\u0026q\u003dfast+food\u0026cid\u003d11711906543434519004","content":"","maxAge":604800,"phoneNumbers":[{"type":"","number":"(408) 873-8213"}],"addressLines":["10123 N Wolfe Rd # Sc5","Cupertino, CA"]},{"GsearchResultClass":"GlocalSearch","viewportmode":"explicit","listingType":"local","lat":"37.337333","lng":"-122.022875","accuracy":"8","title":"Subway Sandwiches","titleNoFormatting":"Subway Sandwiches","ddUrl":"http://www.google.com/maps?source\u003duds\u0026daddr\u003d19998+Homestead+Road%2C+Cupertino%2C+CA+%28Subway+Sandwiches%29+%4037.337333%2C-122.022875\u0026saddr\u003d95014","ddUrlToHere":"http://www.google.com/maps?source\u003duds\u0026daddr\u003d19998+Homestead+Road%2C+Cupertino%2C+CA+%28Subway+Sandwiches%29+%4037.337333%2C-122.022875\u0026iwstate1\u003ddir%3Ato","ddUrlFromHere":"http://www.google.com/maps?source\u003duds\u0026saddr\u003d19998+Homestead+Road%2C+Cupertino%2C+CA+%28Subway+Sandwiches%29+%4037.337333%2C-122.022875\u0026iwstate1\u003ddir%3Afrom","streetAddress":"19998 Homestead Road","city":"Cupertino","region":"CA","country":"United States","staticMapUrl":"http://maps.google.com/maps/api/staticmap?maptype\u003droadmap\u0026format\u003dgif\u0026sensor\u003dfalse\u0026size\u003d150x100\u0026zoom\u003d13\u0026markers\u003d37.337333%2C-122.022875","url":"http://www.google.com/maps/place?source\u003duds\u0026q\u003dfast+food\u0026cid\u003d15764123715191352703","content":"","maxAge":604800,"phoneNumbers":[{"type":"","number":"(408) 446-4453"}],"addressLines":["19998 Homestead Road","Cupertino, CA"]}],"cursor":{"pages":[{"start":"0","label":1},{"start":"4","label":2},{"start":"8","label":3},{"start":"12","label":4}],"estimatedResultCount":"255549","currentPageIndex":0,"moreResultsUrl":"http://www.google.com/local?oe\u003dutf8\u0026ie\u003dutf8\u0026num\u003d4\u0026mrt\u003dyp%2Cloc\u0026sll\u003d37.779160%2C-122.420090\u0026start\u003d0\u0026hl\u003den\u0026q\u003dfast+food+near+95014"},"viewport":{"center":{"lat":"37.32495","lng":"-122.043408"},"span":{"lat":"0.029718","lng":"0.069537"},"sw":{"lat":"37.310093","lng":"-122.07818"},"ne":{"lat":"37.33981","lng":"-122.008644"}}}, "responseDetails": null, "responseStatus": 200}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
If I understand you correctly, you have a JSON formatted STRING, not an actual object. If that is the case, at
http://www.json.org
there is a json parsing utility:
http://www.json.org/json_parse.js
just be sure to remove the first line (as instructed in the file). Assuming that your JSON formatted string is in
data
then
data= json_parse(data);
will convert data from a string to an actual object.
exP
data=json_parse(data);
var results=data.responseData. results;
for(var i=0, limit=results.length;i<lim it; ++i)
{
alert(results[i].title)
}
NOTE: each of your results consists of the following:
{ "GsearchResultClass":"---"
,"viewportmode":"---"
,"listingType":"---"
,"lat":"---"
,"lng":"---"
,"accuracy":"---"
,"title":"---"
,"titleNoFormatting":"---"
,"ddUrl":"---"
,"ddUrlToHere":"---"
,"ddUrlFromHere":"---"
,"streetAddress":"---"
,"city":"---"
,"region":"---"
,"country":"---"
,"staticMapUrl":"---"
,"url":"---"
,"content":"---"
,"maxAge":###
,"phoneNumbers":[{"type":" ---","numb er":"---"} ]
,"addressLines":["---","-- -"]
}
Notice that "title" is one of them. So based on the for() construct I gave you above, if you wanted the city as well:
alert(results[i].title + " " + results[i].city)
The "tricky" ones will be the last two (phoneNumbers and addressLines) since these are arrays.
Notice that the data/elements contained in phoneNumbers are objects. So you will need to derefence each of the object properties explicitly - that is either ".type" and/or ".number":
for(var i=0, limit=results.length;i<lim it; ++i)
{
var temp = results[i].title
for( var j=0; j < results[i].phoneNumbers.le ngth;++j)
{
temp += "\n\t" + results[i].phoneNumbers[j] .type + " " + results[i].phoneNumbers[j] .number;
}
alert(temp);
}
addressLines is very similar to phoneNumbers, except that its elements are NOT object. So you can get its contents based on the array index alone:
for(var i=0, limit=results.length;i<lim it; ++i)
{
var temp = results[i].title
for( var j=0; j < results[i].addressLines.le ngth;++j)
{
temp += "\n\t" + results[i].addressLines[j] + " " + results[i].addressLines[j] ;
}
alert(temp);
}
http://www.json.org
there is a json parsing utility:
http://www.json.org/json_parse.js
just be sure to remove the first line (as instructed in the file). Assuming that your JSON formatted string is in
data
then
data= json_parse(data);
will convert data from a string to an actual object.
exP
data=json_parse(data);
var results=data.responseData.
for(var i=0, limit=results.length;i<lim
{
alert(results[i].title)
}
NOTE: each of your results consists of the following:
{ "GsearchResultClass":"---"
,"viewportmode":"---"
,"listingType":"---"
,"lat":"---"
,"lng":"---"
,"accuracy":"---"
,"title":"---"
,"titleNoFormatting":"---"
,"ddUrl":"---"
,"ddUrlToHere":"---"
,"ddUrlFromHere":"---"
,"streetAddress":"---"
,"city":"---"
,"region":"---"
,"country":"---"
,"staticMapUrl":"---"
,"url":"---"
,"content":"---"
,"maxAge":###
,"phoneNumbers":[{"type":"
,"addressLines":["---","--
}
Notice that "title" is one of them. So based on the for() construct I gave you above, if you wanted the city as well:
alert(results[i].title + " " + results[i].city)
The "tricky" ones will be the last two (phoneNumbers and addressLines) since these are arrays.
Notice that the data/elements contained in phoneNumbers are objects. So you will need to derefence each of the object properties explicitly - that is either ".type" and/or ".number":
for(var i=0, limit=results.length;i<lim
{
var temp = results[i].title
for( var j=0; j < results[i].phoneNumbers.le
{
temp += "\n\t" + results[i].phoneNumbers[j]
}
alert(temp);
}
addressLines is very similar to phoneNumbers, except that its elements are NOT object. So you can get its contents based on the array index alone:
for(var i=0, limit=results.length;i<lim
{
var temp = results[i].title
for( var j=0; j < results[i].addressLines.le
{
temp += "\n\t" + results[i].addressLines[j]
}
alert(temp);
}
ASKER
Thanks man that was exactly what I needed to understand how it works
Open in new window