Json data extract using Jquery

Question

I have json format like this -

How can i get the photo reference value? I have tried a lot.

{
"debug_info" : [],
"html_attributions" : [
   "Listings by \u003ca href=\"http://www.yellowpages.com.au/\"\u003eYellow Pages\u003c/a\u003e"
],
    "results" : [
  {
     "geometry" : {
        "location" : {
           "lat" : -33.859618,
           "lng" : 151.208017
        }
     },
     "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/cafe-71.png",
     "id" : "4eb1c6eb8ec71a621f4d88e9aef77b0fce7ac304",
     "name" : "Harbour Rocks Hotel Sydney",
     "photos" : [
        {
           "height" : 196,
           "html_attributions" : [],
           "photo_reference" : "CoQBeAAAAKTzIvsp1PJml8nzzxCAggrnyEu1-J3B6YbWhf3SMJLadZODgKnkEvWuXwKemOM4xc0IQpBv3LmkPOOZvXEuM0PBNp6YfvQc1EOHR_UF9K87ITUfM4f1nCnTFWpWjXFY5J4Aw1z1hJdu0LGfqcszeaImXBRxdzxlUw0Z9QTK-wWOEhCrs6v7gxJVLymtHl0WGv33GhTq_DgXtofepJ909JqOFrXw90fOEQ",
           "width" : 294
        }
     ],
     "rating" : 3.7,
     "reference" : "CoQBeAAAAHzr_LYm87OynYHffSsOFLsqzQO3iWo_DrC-JE8oZUNvYwyAlzumN0F9S87Lb2AbZrejbpbzvGC0JEy1-R52WbME4sRfqOYpM1AAvTRXVjMLus6ZRjU0nnJOGxyJdEdPRcPURThiTMDqH2AB9p4cGyqLtdKdG8hSNTcVOBykIAt7EhD6quPd7PCrVy4aETt8lYarGhRWuRNfSsnzsEdJ2MecTUXV0F65uQ",
     "types" : [ "cafe", "bar", "lodging", "food", "establishment" ],
     "vicinity" : "34 Harrington Street, The Rocks"
  },
  {
     "geometry" : {
        "location" : {
           "lat" : -33.87054,
           "lng" : 151.198815
        }
     },
     "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/cafe-71.png",
     "id" : "c71365287e7606bd21a3311d21fda087830b7813",
     "name" : "Pancakes on the Rocks",
     "opening_hours" : {
        "open_now" : false
     },
     "photos" : [
        {
           "height" : 1224,
           "html_attributions" : [
              "\u003ca href=\"https://plus.google.com/105663944571530352563\"\u003eJoshua Gilmore\u003c/a\u003e"
           ],
           "photo_reference" : "CnRoAAAAj1WWQDr0Uh-Naj8Fzg413dzP-3mix2O53r9mZEvRUaMEWZGiHthrE-whJhuW-aIUhyL-yk47DXOXR1DKHD5UacOzi99xTjSCNLXN-5_xetw_9xyRZkLofzamziEFoijl2v_JPthE46BoZRl6fQmeaBIQewa4UNPWTksaCfBBgckw-hoUBFtYJ87HMq2ZrCGPRhW0euefWYc",
           "width" : 1632
        }
     ],
     "price_level" : 2,
     "rating" : 3.8,
     "reference" : "CoQBcgAAAAcnHQk8ynZuToE6HAMJIRklS06ldx7XJXv5AhKQgIgXLURw71KoI_u3bAZ6Fv5X_LUv0QdTX_hQIwZpdLtegQvHOyIFKSRjeKw7_G-cdC7Ly_mJAzB-fXHhJlgKmHTFZ8J-WdK5ZjU7mm9ABBG0Q4rvoN5vyAWGfYGYX3JpKDmgEhA-s27w07KdpRZ7wLoaQKhZGhQdXJoNOqN1wuu0RC_f3c--EjUnGg",
     "types" : [ "cafe", "restaurant", "food", "establishment" ],
     "vicinity" : "Harbourside Shopping Centre,Darling Harbour,227/229-230 Darling Drive, Sydney"
  },
.
.
.

}

Thanks in advance.

This should work as I have become succesful to get value of latitude , longitude ,vicinity .**$.each( data.results, function( key, value ) { alert(value.photos[0].photo_reference); }** — sharif2008, Sep 23 '13 at 18:03
That should work, are there any errors in your javascript console? What is the alert showing? — Jason P, Sep 23 '13 at 18:07
the scrpit is not working at all. nothing alerted and if comment this alert then the code is alright :( — sharif2008, Sep 23 '13 at 18:10
Did you check your javascript console? I bet there's an error there. — Jason P, Sep 23 '13 at 18:12
yeah there is an error and this is **TypeError: e is undefined http:,../jquery-1.9.1.min.js Line 3** — sharif2008, Sep 23 '13 at 18:15

score 2 · Answer 1 · answered Sep 23 '13 at 18:10

2

The photo reference is in an array so you will need to loop over the "results" array, and then loop over the photos array (assuming that there could be more than one) and then you would have access to the "photo reference".

var data = { JSON HERE }
$.each(data.results,function() {
 $.each(this.photos,function() {
    console.log(this.photo_reference);
 });
})

answered Sep 23 '13 at 18:10

nathanfirth

27
3

there is an error and this is TypeError: e is undefined http:,../jquery-1.9.1.min.js Line 3 – sharif2008 Sep 23 '13 at 18:20
The JSON is missing a closing array bracket ], I corrected this, and then I ran this in Firebug and was able to access all the photo references – nathanfirth Sep 23 '13 at 18:31
then what can i do plz? – sharif2008 Sep 23 '13 at 19:01
The above code works. Just set "data" equal to your JSON object and then it should log the photo_reference to your firebug console. If you include your script that would help. – nathanfirth Sep 23 '13 at 21:23

score 0 · Answer 2 · answered Sep 23 '13 at 18:12

Say that this JSON object is in a javascript variable called placesJSON you can access the first map result like this:

placesJSON.results[0].photos[0].photo_reference

To get each of the photo_reference in all results, you should loop over the results like this:

for(var placeIndex in placesJSON.results){
  for(var photoIndex in placesJSON.results[placeIndex].photos) {
    var reference = placesJSON.results[placeIndex].photos[photoIndex].photo_reference;
    // Do something with the reference here
    console.log(reference);
  }
}

score 0 · Answer 3 · answered Sep 23 '13 at 18:55

First of all check if your json is valid, then try following (pre-condition: photo_reference is not an array)

$jsonIterator = new RecursiveIteratorIterator (
    new RecursiveArrayIterator(json_decode($yourJsonString,TRUE)),
    RecursiveIteratorIterator::SELF_FIRST
);

$result = array();
$i = 0;

foreach ($jsonIterator as $key => $val) {
    if ($key == 'photo_reference')
        $result[$i++] = $val;
}

var_dump($result);

score 0 · Answer 4 · answered Sep 23 '13 at 19:13

Here is what I use in our api's with json.. i just use jquery to parse the json. From there treat it like an object var whatIneed = Obj.Variable

for (var i = 0; i < jsonList.length; i++) {
    var photojson = $.parseJSON(jsonList[i]);
    var photo = new Object();
    photo.title = event.title;
    photo.id = event.id;
    ...
    photolist.push(ev);
}

and this should work, with some tweaking of course

Json data extract using Jquery

4 Answers4