Question

I can’t see to access the deepest values in my json object. It’s an array of images and it reads:

{
   "imgs":[
      {
         "Landscape":{
            "2":"DSCF2719.jpg",
            "3":"DSCF2775.jpg",
            "4":"IMG_1586.jpg",
            "5":"Red Rose.jpg",
            "6":"untitled030617.jpg",
            "7":"untitled071756.jpg",
            "8":"untitled170744.jpg",
            "9":"untitled170907.jpg",
            "10":"untitled235450.jpg"
         }
      },
      {
         "People":{
            "2":"IMG_0775.jpg",
            "3":"untitled011003.jpg",
            "4":"untitled011809.jpg",
            "5":"untitled024716.jpg",
            "6":"untitled114229.jpg",
            "7":"untitled120704-1.jpg",
            "8":"untitled120704.jpg",
            "9":"untitled203242.jpg",
            "10":"untitled222816.jpg",
            "11":"untitled231442-2.jpg"
         }
      },
      {
         "Still Life":{
            "2":"DSCF2769.jpg",
            "3":"untitled001620.jpg",
            "4":"untitled010832.jpg",
            "5":"untitled112413.jpg",
            "6":"untitled152613.jpg",
            "7":"untitled232940.jpg"
         }
      },
      {
         "Test":{
            "2":"DSCF2719.jpg",
            "3":"DSCF2769.jpg",
            "4":"DSCF2775.jpg",
            "5":"IMG_0775.jpg",
            "6":"IMG_1586.jpg",
            "7":"Red Rose.jpg",
            "8":"untitled001620.jpg",
            "9":"untitled010832.jpg",
            "10":"untitled011003.jpg",
            "11":"untitled011809.jpg",
            "12":"untitled024716.jpg",
            "13":"untitled030617.jpg",
            "14":"untitled071756.jpg",
            "15":"untitled112413.jpg",
            "16":"untitled114229.jpg",
            "17":"untitled120704.jpg",
            "18":"untitled152613.jpg",
            "19":"untitled170744.jpg",
            "20":"untitled203242.jpg",
            "21":"untitled222816.jpg",
            "22":"untitled231442-2.jpg",
            "23":"untitled232940.jpg",
            "24":"untitled235450.jpg"
         }
      }
   ],
   "cats":[
      "Landscape",
      "People",
      "Still Life",
      "Test"
   ]
}

I can access all except the deepest set with:

// accessed with $.ajax()
var obj = $.parseJSON(msg)
console.log(obj.cats[0]) // "Landscape"
console.log(obj.imgs[0][5]) // undefined
console.log(obj.imgs.length) // "3"

I’ve also tried without the associative aspect in the deepest level, with just "DSCF2719.jpg", instead of "2":"DSCF2719.jpg",

I can’t seem to find this on the net. What am I missing?

Answer 1

Each group is nested in an object under a category like Landscape, People, but since the individual images are numeric properties, they will need to be accessed with [] rather than the more usual JavaScript dot property notation.

// imgs is an Array, numerically indexed like [0]
// Landscape is an object in the first imgs element accessed via .Landscape
// 2 is a property of the Landscape object, but must be accessed with [2]
console.log(obj.imgs[0].Landscape[2]);
// "DSCF2719.jpg"

console.log(obj.imgs[0].People[6]); 
// "untitled114229.jpg"

The last property cats of your outer object is just an array, accessed via numeric indices:

console.log(obj.cats[0]);
// Landscape

Edit: To get the images in a loop:

// Loops over imgs
for (var i=0; i<obj.imgs.length; i++) {
  var catName = obj.cats[i]; // Landscape, People, etc...
  // Use catName inside []
  // and a for-in loop to get the subsequent numeric properties
  for (var imgNum in obj.imgs[i][catName]) {
    console.log(obj.imgs[i][catName][imgNum]);
  }
}