How do I retrieve a property from a JSON object?

Question

This is my JSON object, received via AJAX.

{
    "results": [
        {
            "picture": {
                "large": "https://randomuser.me/api/portraits/women/50.jpg",
                "medium": "https://randomuser.me/api/portraits/med/women/50.jpg",
                "thumbnail": "https://randomuser.me/api/portraits/thumb/women/50.jpg"
            }
        }
    ],
    "info": {
        "seed": "8f0630cfc3b5e88c",
        "results": 1,
        "page": 1,
        "version": "1.1"
    }
}

How do i log the URL for one of the picture properties?

I did try console.log(data.hasOwnProperty(data["results.picture.large"]));, although that returns false.

You can't do `data["results.picture.large"]` but you can do `data.results[0].picture.large` — Patrick Roberts, Jun 02 '17 at 22:20
assuming data is your returned JSON object. To get a photo console.log(data.results.picture.large) (will return true) — Korgrue, Jun 02 '17 at 22:22
"data" needs to be whatever name references your JSON object. — Korgrue, Jun 02 '17 at 22:23
Assoiative syntax and dot notation `can["be"].mixed` but `not["like.this"]`. — Roamer-1888, Jun 02 '17 at 22:53

score 0 · Answer 1 · answered Jun 02 '17 at 22:28

Hopefully this explains everything you're unclear about.

var data = {
  "results": [{
    "picture": {
      "large": "https://randomuser.me/api/portraits/women/50.jpg",
      "medium": "https://randomuser.me/api/portraits/med/women/50.jpg",
      "thumbnail": "https://randomuser.me/api/portraits/thumb/women/50.jpg"
    }
  }],
  "info": {
    "seed": "8f0630cfc3b5e88c",
    "results": 1,
    "page": 1,
    "version": "1.1"
  }
};

var results = data.results;
var result = results[0];
var picture = result.picture;
var large = picture.large;

console.log(data.hasOwnProperty('results'));
console.log(result.hasOwnProperty('picture'));
console.log(picture.hasOwnProperty('large'));
console.log(data.results[0].picture.large === large);
console.log(data.results[0].picture.large);

score 0 · Answer 2 · answered Jun 02 '17 at 22:32

Since results is an array we have to specify the array index as follows: data.results[0].picture.large

var data = {
    "results": [
        {
            "picture": {
                "large": "https://randomuser.me/api/portraits/women/50.jpg",
                "medium": "https://randomuser.me/api/portraits/med/women/50.jpg",
                "thumbnail": "https://randomuser.me/api/portraits/thumb/women/50.jpg"
            }
        }
    ],
    "info": {
        "seed": "8f0630cfc3b5e88c",
        "results": 1,
        "page": 1,
        "version": "1.1"
    }
}

console.log(data.results[0].picture.large);

score 0 · Answer 3 · answered Jun 02 '17 at 22:34

Lets assume you recieved your json data through ajax and saved it in a variable called data. You can access it like this.

This is for thumbnail img : data["results"][0]["picture"]["thumbnail"]

This is for medium img : data["results"][0]["picture"]["medium"]

This is for large img : data["results"][0]["picture"]["large"]

Your probable wondering how does this work here is an example.

var data = {
   "johnlee123" : {
      "address" : "123 s adam st",
      "zipcode" : 43924
   },
   "julie234" : {
      "address" : "234 n sachel st",
      "zipcode" : 34567
   }
};

If you access this data["johnlee123"] it will give you this

{
  "address" : "123 s adam st",
  "zipcode" : 43924
}

and if you access this data["johnlee123"]["address"] it will give you back this

"123 s adam st"

How do I retrieve a property from a JSON object?

3 Answers3