如何通過一組值對循環JSON對象

Question

即時通訊嘗試通過JQuery對象循環JSON對象。由於某種原因，它沒有循環的權利..它似乎一直循環到最後，但我想要獲得每個單獨的屬性在我的對象。我使用一個For（var in）循環正確地循環通過我的對象，但它的一點點.. MyAny幫助將是glady讚賞..非常感謝！我可以提供一個快速鏈接到我的網站，如果需要嘲笑的代碼.. 我也添加了更多的代碼和HTML通過使用..提示*** Theres更多如果 - 條件語句，檢查sounds_like，sounds_price ...第一個JSON對象的工作沒有問題，它的第二個JSON對象，即時通訊使用帶有彈出了這就是導致我麻煩

<div class="overlay-bg"> 
     <div id= "overlay" class="overlay-content"> 
      <p>This is a popup!</p> 
      <button class="close-btn">Close</button> 
     </div> 
    </div> 


     $.getJSON("php/music_data.php",function(data){ 
      $.each(data,function(key,obj){ 

       for(var prop in obj){ 
        // console.log("Property: " + prop + " key:" + obj[prop]); 
        if(prop === "sounds_like"){ 

         results_div = document.getElementById("results"); 
         music_div_container = document.createElement("div"); 
         music_div_container.id = "music_data_container"; 
         music_div_container.innerHTML = "<div id=\"sounds_like\">" + "Sounds Like: " + obj["sounds_like"] +"</div>"; 
         results_div.appendChild(music_div_container); 

         var pop_up = document.createElement("a"); 
         pop_up.href = "#"; 
         pop_up.className = "show-popup"; 
         pop_up.innerHTML = "Click"; 
         music_div_container.appendChild(pop_up); 

         default_photo = document.createElement('div'); 


        } 

        if(prop === "sound_desc"){ 

         var sound_desc = document.createElement("div"); 
         sound_desc.innerHTML = "<div id=\"sounds_desc\">" +  obj["sound_desc"] +"</div>"; 
         music_div_container.appendChild(sound_desc); 

        } 


    $.getJSON("php/music_data.php",function(data){ 
    $.each(data,function(idx,obj){ 

    $.each(obj,function(key,value){ 

     $(".show-popup").click(function(event){ 

      event.preventDefault();  
      $(".overlay-bg").show(); 

       if(key === "sounds_like"){ 
          /***Should be Beyonce,Drake,Nicki Minaj***/ 
          /*****But my console is showing Nicki Minaj*******/ 
        $(".overlay-content").html(value); 
       } 
      if(value === "sounds_desc"){ 
          /***Should be Smooth, Wu tang Forever, Barbie***/ 
          /*****But my console is showing Barbie*******/ 
       $(".overlay-content").html(value); 
      } 


      $('.close-btn').click(function(){ 
       $('.overlay-bg').hide(); /*** hide the overlay ***/ 
      }); 

      $('.overlay-bg').click(function(){ 
       $('.overlay-bg').hide(); 
      }); 

      $('.overlay-bg').click(function(){ 
       return false; 
      }) 
     }); 
    }); 

    }) 
}); 

JSON對象下

[{"id":"39","sounds_like":"Beyonce","sound_name":"Dance 4 u.mp3","sound_desc":"Smooth","sound_genre":"R&B","sound_price":"N/A","photo_path":"\/admin_data\/uploaded_artist_photos\/","photo_name":"beyonce.jpg"}, 
{"id":"40","sounds_like":"Drake","sound_name":"Bottom.mp3","sound_desc":"Wu Tang Forever","sound_genre":"Rap","sound_price":"N/A","photo_path":"\/admin_data\/uploaded_artist_photos\/","photo_name":"drake.jpg"}, 
{"id":"41","sounds_like":"Nicki Minaj","sound_name":"RomanReloaded.mp3","sound_desc":"Barbie","sound_genre":"Rap","sound_price":"N/A","photo_path":"\/admin_data\/uploaded_artist_photos\/","photo_name":"nickiminaj.jpg"} 
] 

Answer 1

當你循環復對象使用一個for var in循環，因爲這個循環是如何工作的，你總會有意想不到的行爲。

爲了避免這樣的問題，如果你需要使用這種類型的循環，我建議你做到以下幾點：

例子：

for (var i in obj) { 
    if (obj.hasOwnProperty(i)) { // this validates if prop belongs to obj 
     // do something 
    } 
} 

編輯1：

我m不知道你要做什麼，但使用jQuery你可以做到以下幾點：

$.getJSON("php/music_data.php", function (data) { 

    $.each(data, function (i, value) { 
     //alert(i + ": " + value.id); 

     alert(value.sounds_like); 
     // this will have Beyonce , Drake, Nicki Minaj 

    }); 

}); 

另一件看起來不正確的事情是，你正在每個循環上執行綁定單擊事件。不同的做法會更好嗎？