如何通过一组值对循环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 

    }); 

}); 

另一件看起来不正确的事情是，你正在每个循环上执行绑定单击事件。不同的做法会更好吗？