parse JSON object to retrieve a property

Question

I need to access the href properties and return as a bunch of img elements with their sources as the extracted href properties. How do I do this in either javascript or jQuery.

I did something like this, without any result:

var myData = jQuery.parseJSON(jsonString);
alert(myData + "SDFS");

$(document).ready(function() { 
    var $grouplist = $('div#groups');
    $.each(myData, function(index) {
        $('<li>' + this.query.results.a[index].href+ '</li>').appendTo($grouplist);
    });

The JSON itself is :

{
  "query": {
    "count": 99,
    "created": "2015-05-28T16:41:45Z",
    "lang": "en-US",
    "diagnostics": {
      "publiclyCallable": "true",
      "redirect": {
        "from": "https://googledrive.com/host/0B-7mpdkiECAefkND6cy1tV3prSHc1b2Z3Vm9sSjNORDZfeHZRYldScUdZd1NGaUU/",
        "status": "302",
        "content": "https://1fd05575081cdaaf2fdc49e37444f3390503e229.googledrive.com/host/0B-7mpdkiEFTT3prSHc1b2Z3Vm9sSjNORDZfeHZRYldScUdZd1NGaUU/"
      },
      "url": [
        {
          "execution-start-time": "1",
          "execution-stop-time": "1085",
          "execution-time": "1084",
          "content": "https://googledrive.com/host/0B-7mpdkiETXR6cy1tV3prSHc1b2Z3Vm9sSjNORDZfeHZRYldScUdZd1NGaUU/"
        },
        {
          "execution-start-time": "1",
          "execution-stop-time": "1085",
          "execution-time": "1084",
          "content": "https://googledrive.com/host/0B-7mpdkiECAefky1tV3prSHc1b2Z3Vm9sSjNORDZfeHZRYldScUdZd1NGaUU/"
        },
        {
          "execution-start-time": "1",
          "execution-stop-time": "1085",
          "execution-time": "1084",
          "content": "https://googledrive.com/host/0B-7mpdkiECAefkND3prSHc1b2Z3Vm9sSjNORDZfeHZRYldScUdZd1NGaUU/"
        }
      ],
      "user-time": "1108",
      "service-time": "3234",
      "build-version": "0.2.509"
    },
    "results": {
      "a": [
        {
          "href": "/host/0B-7mpdkiECAefkNDUXFTTXR6cy1tV3prSHc1b2Z3Vm9sSjNORDZfeHZRYldScUdZd1NGaUU/CD%20RELEASE2014.jpg",
          "content": "CD RELEASE.jpg"
        },
        {
          "href": "/host/0B-7mpdkiECAefkNDUXFTTXR6cy1tV3prSHc1b2Z3Vm9sSjNORDZfeHZRYldScUdZd1NGaUU/dsc_6209.jpg",
          "content": "dsc_6279.jpg"
        },
        {
          "href": "/host/0B-7mpdkiECAefkNDUXFTTXR6cy1tV3prSHc1b2Z3Vm9sSjNORDZfeHZRYldScUdZd1NGaUU/dsc_6219_0.jpg",
          "content": "dsc_6279_0.jpg"
        },
        {
          "href": "/host/0B-7mpdkiECAefkNDUXFTTXR6cy1tV3prSHc1b2Z3Vm9sSjNORDZfeHZRYldScUdZd1NGaUU/dsc_620.jpg",
          "content": "dsc_6280.jpg"
        }
      ]
    }
  }
}

that's not json anymore. you've decoded it to a JS object/array structure. You access the data like you would any OTHER object/array structure. — Marc B, May 28 '15 at 17:26
possible duplicate of [Parse JSON in JavaScript?](http://stackoverflow.com/questions/4935632/parse-json-in-javascript) — Dexygen, May 28 '15 at 17:26
@MarcB when did it become a non-JSON? When I assigned it to a variable? — Athapali, May 28 '15 at 17:37
when you did `.parseJson()`. json is a text-encoding of a JS data structure. when you decode it, it's no longer json. it's just a data structure. — Marc B, May 28 '15 at 17:44

Richard Kho · Accepted Answer · 2015-05-28T17:53:27.887

1

This is now a plain old Javascript object, so you can access it quite easily. Iterate over the array you actually want to pull from with $.each:

$.each(myData.query.results.a, function(elem) {
  $('<li><img src="' + myData.query.results.a[elem].href + '"/></li>').appendTo($grouplist)
});

Full code:

var myData = jQuery.parseJSON(jsonString);
alert(myData + "SDFS");

$(document).ready(function() {
  var $grouplist = $('div#groups');
  $.each(myData.query.results.a, function(elem) {
  $('<li><img src="' + myData.query.results.a[elem].href + '"/></li>').appendTo($grouplist)
  });
})

edited May 28 '15 at 17:53

answered May 28 '15 at 17:30

Richard Kho

5,086
4
21
35

You have an open bracket that isn't within the string, right before your `
` tag. I've updated my code to grab the image link an render it to the unordered list.

Richard Kho

May 28 '15 at 17:52

score 1 · Answer 2 · answered May 28 '15 at 17:54

1

try this for getting href attribute

var obj=kk.query.results.a

for(var i=0;i

console.log(obj[i].href);

}

answered May 28 '15 at 17:54

Muhammad Waqas

1,140
12
20

score 0 · Answer 3 · answered May 28 '15 at 17:31

Try this:

var myData = jQuery.parseJSON(jsonString);
alert(myData + "SDFS");

$(document).ready(function() { 
    var $grouplist = $('div#groups');
    $.each(myData.results.a, function(obj) {
        $('<li>' + obj.href + '</li>').appendTo($grouplist);
    });

parse JSON object to retrieve a property

3 Answers3