如何通過json數組循環來獲取javascript中的值

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

後我運行這個功能我得到的預期，但只有div的第一個孩子已經顯示出圖像和其他3已經打破IMG創造了4個格，我嘗試調試，我看到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;您可以簡單地遍歷數據，因爲您的數組只有一個對象。如果它更多，則需要一個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 2

使用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 3

超值享受一行代碼，取代幾乎所有代碼：

 $(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)

DEMO

Answer 4

問題是與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>