multidimensional json from php

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]);
  }
}

Answer 2

obj.imgs[0] is an object. It's the one that has the only property 'Landscape'. That property's value is an object with 9 properties. So you should try accessing obj.imgs[0][Landscape][5].

But as I see your objective is to pair indexes in "cats" with indexes in "imgs", in that case for cats[0] you should more descriptively access obj.imgs[cats[0]][5].

Beware that the innermost lists are not indexed but named. 5 is not the index of the sixth element but the name of the fourth, so it yields the Red Rose. Since the object provides no direct information on which keys are present in the innermost arrays, you could use a for(x in ...) loop to find all elements.