Question

我正在构建一个带有json图像的滑块，这是json结构

{  
    "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"
            }
        ]
    }
    ]
}

我的问题是幻灯片具有相同的结构但键不同，我怎么能在这个结构中循环？ THX

Answer 1

我的问题是幻灯片具有相同的结构但是不同的键，我怎么能在这个结构里面循环？

像

这样的东西

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

我认为循环没有任何问题，因为你有一个数组。唯一需要注意的是获取对象的密钥是先验未知的，但是你可以使用它来抛出 Object.keys 方法。

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

   }
}

顺便说一句，使用对象而不是数组的更好结构将更容易循环。

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

请注意，这仅适用于您当前的结构，您的结构就是这样修复的。

Javascript循环通过json与不同的键为相同的对象结构

3 个答案: