DEMO

Question

我有下面的json对象，我想循环遍历它并在div中显示值。我的json对象和运行它的函数在

之下

  photos = [{"photo1":"myimage1.jpg",
           "photo2":"myimg2.jpg",
           "photo3":"myimg3.jpg",
           "photo4":"myimg4.jpg",}]

           function showPhotoOnLoad(photos,$imgUrl){
           var $photoData = photos; 
           var photoLength = Object.keys($photoData[0]).length;
           var i, key;  
           var $containerWidth = 110;
           //alert(photoLength);
           if(photoLength >0){
               $(".mycarousel-container").show();
                 for (i in $photoData) {
                for (key in $photoData[i]) {
                  a = $photoData[i][key];
                imgsrc = $imgUrl = $imgUrl+a; 
                var div = $("<div class='mycarousel' style='left:"+left+"px'></div>");
                var imgPreview = "<img  class='myimg' src="+imgsrc+">";
                div = div.append(imgPreview);
                $(".carouser-inner").append(div);

                left = left+$containerWidth;

                }               
              }
           }                              
           //console.log($imgUrl);            
       }

运行此功能后，我按照预期创建了4个div，但只有div的第一个子显示图像而另外3个已经打破img，我尝试调试，我看到var a这是假设的是img之类的myimg1.jpg名称，我得到的结果是

`a=myimg1.jpg` //at first iteration of the for loop which make the img display correctly,
`a=myimg1.jpgmyimg2.jpg` //at the second iteration 
`a=myimg1.jpgmyimg2.jpgmyimg3.jpg` //at the third iteration
`a=myimg1.jpgmyimg2.jpgmyimg3.jpgmyimg4.jpg` //at the last iteration

我想得到的是如下所示，因此创建的所有div都将具有指向img的正确链接

`a=myimg1.jpg` //at the first iteration
`a=myimg2.jpg` //at the second iteration 
`a=myimg3.jpg` //at the third iteration
`a=myimg4.jpg //at the last iteration

Answer 1

问题在于imgsrc = $ imgUrl = $ imgUrl + a;

以下是工作代码段

var photos = [{"photo1":"myimage1.jpg",
           "photo2":"myimg2.jpg",
           "photo3":"myimg3.jpg",
           "photo4":"myimg4.jpg"}];

            showPhotoOnLoad(photos,"imageurl");

           function showPhotoOnLoad(photos,$imgUrl){
           var $photoData = photos; 
           var photoLength =     Object.keys($photoData[0]).length;
           var i, key;  
           var $containerWidth = 110;
           //alert(photoLength);
           if(photoLength >0){
               $(".mycarousel-container").show();
                 for (i in $photoData) {
                for (key in $photoData[i]) {
                  a = $photoData[i][key];
                imgsrc = "a="+a; 
                var div = $("<div class='mycarousel' style='left:20px'></div>");
                var imgPreview = "<img  class='myimg' src="+imgsrc+">";
                div = div.append(imgPreview);
                $(".carouser-inner").append(div);
console.log(imgsrc);
               // left = left+$containerWidth;

                }               
              }
           }                              
           //console.log($imgUrl);            
       }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

我不确定这条线是做什么的。 imgsrc = $imgUrl = $imgUrl + a;您可以简单地循环遍历您的数据，因为您的数组只有一个对象。如果它有更多，你需要一个for循环包装当前循环来获取所有对象。

photos = [{"photo1":"myimage1.jpg",
           "photo2":"myimg2.jpg",
           "photo3":"myimg3.jpg",
           "photo4":"myimg4.jpg",}];

       function showPhotoOnLoad(photos,$imgUrl){
       var $photoData = photos[0]; 

       var $containerWidth = 110;
       //alert(photoLength);
       if($photoData.length >0){
           $(".mycarousel-container").show();
            for (var i in $photoData){

            imgsrc = $photoData[i];
            var div = $("<div class='mycarousel' style='left:"+left+"px'></div>");
            var imgPreview = "<img  class='myimg' src="+imgsrc+">";
            div = div.append(imgPreview);
            $(".carouser-inner").append(div);

            left = left+$containerWidth;

            }               
          }
       }                              
       //console.log($imgUrl);            
   }

Answer 3

使用Object.keys.length获取对象的长度。

使用for..in获取每个密钥的值

var photos = [{
  "photo1": "myimage1.jpg",
  "photo2": "myimg2.jpg",
  "photo3": "myimg3.jpg",
  "photo4": "myimg4.jpg",
}]

var _div = ("<div class='mycarousel' style='left:2px'></div>");
var _divCache = "";

if (Object.keys(photos).length > 0) { // will check if the length is greater than 0 
  $(".mycarousel-container").show()
    // loop through each of the key. 0 since photos is an array of object
  for (var keys in photos[0]) {
    //photos[0][keys] will return values
    var imgPreview = $("<img  class='myimg' alt='img' src='" + photos[0][keys] + "'>");
    $(".carouser-inner").append($(_div).append((imgPreview)[0]));
  }
}

JSFIDDLE

Answer 4

享受一线代码，几乎取代所有代码：

     $(photos.map((item)=>
          Object.keys(item).map((key)=>
               `<div class='mycarousel' style='left:${left}px'>
                     <img src="${item[key]}" class="myimg" />
                </div>`
         ).join('') 
     ).join('')).appendTo('.carouser-inner')

已知：$(A).append(B)与$(B).appendTo(A)

相同

如何循环遍历json数组以获取javascript

4 个答案:

DEMO