Javascript Loop throug json with different key for same object structure

Question

I'm building a slider with the images taken from a json, this is the json structure

{  
    "info":[  
    {  
        "slide1":[  
            {  
                "title":"Title 1"
            },
            {  
                "subTitle":"sub title 1"
            },
            {  
                "image":"assets/img/image1.jpg"
            }
        ]
    },
    {  
        "slide2":[  
            {  
                "title":"Title 2"
            },
            {  
                "subTitle":"sub title 2"
            },
            {  
                "image":"assets/img/image2.jpg"
            }
        ]
    },
    {  
        "slide3":[  
            {  
                "title":"Title 3"
            },
            {  
                "subTitle":"sub title 3"
            },
            {  
                "image":"assets/img/image3.jpg"
            }
        ]
    }
    ]
}

My problem is that the slides have all the same structure but different keys, how could I loop inside this structure? Thx

Answer 1

My problem is that the slides have all the same structure but different keys, how could I loop inside this structure?

Something like

obj.info.forEach( function( item ){ //iterate info
  var slideName = Object.keys( item )[0]; //get the first key from each item
  var slideObj = item[ slideName ];

  //logic to build slider from the slideObj

});

Answer 2

I think there isn't any problem with looping because you have an array. The only caveat would be get the key of the object a priori unknown, but you can get it throw the Object.keys method.

var obj= {  
    "info":[  
    {  
        "slide1":[  
            {  
                "title":"Title 1"
            },
            {  
                "subTitle":"sub title 1"
            },
            {  
                "image":"assets/img/image1.jpg"
            }
        ]
    },
    {  
        "slide2":[  
            {  
                "title":"Title 2"
            },
            {  
                "subTitle":"sub title 2"
            },
            {  
                "image":"assets/img/image2.jpg"
            }
        ]
    },
    {  
        "slide3":[  
            {  
                "title":"Title 3"
            },
            {  
                "subTitle":"sub title 3"
            },
            {  
                "image":"assets/img/image3.jpg"
            }
        ]
    }
    ]
};


for(var i in obj.info){
   var slide = obj.info[i];
   var keys = Object.keys(slide);
   for(var j in keys ){
      var elements = slide[keys[j]];
      for (var k0 in elements){
         var element = elements[k0];
         var element_keys = Object.keys(slide);
         for(var k1 in element_keys ){
          //Here you have the child element
          console.log(element[element_keys[k1]]);
         }
      }  

   }
}

By the way, a better structure with objects instead of arrays would be easier to loop.

Answer 3

 data = { "info":[ { "slide1":[ { "title":"Title 1" }, { "subTitle":"sub title 1" }, { "image":"assets/img/image1.jpg" } ] }, { "slide2":[ { "title":"Title 2" }, { "subTitle":"sub title 2" }, { "image":"assets/img/image2.jpg" } ] }, { "slide3":[ { "title":"Title 3" }, { "subTitle":"sub title 3" }, { "image":"assets/img/image3.jpg" } ] } ] } for(slide in data['info']){ for(slideName in data['info'][slide]){ title=data['info'][slide][slideName][0]['title']; subTitle=data['info'][slide][slideName][1]['subTitle']; image=data['info'][slide][slideName][2]['image']; document.write('slideName: '+slideName+'<br>'); document.write('title: '+title+'<br>'); document.write('subTitle: '+subTitle+'<br>'); document.write('image: '+image+'<hr>'); } } 

note that this is just for your current structure, and your structure is fix like that.