如何循环通过一组值对 JSON 对象

Question

我试图通过 Jquery 循环访问 JSON 对象。出于某种原因，它没有正确循环。它似乎一直循环到最后，但我想在我的对象中获取每个单独的属性。我正在使用 For(var in) 循环，该循环正确地循环通过我的对象，但它有点偏离.. 非常感谢 MyAny 的帮助.. 非常感谢！！！如果需要，我可以提供一个指向我的网站的快速链接，该链接具有代码模型。 我还通过使用 ..Hint 的元素添加了更多代码和 html*** 还有更多 if - 检查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：

我不确定您要做什么，但使用 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

    });

});

另一件看起来不正确的事情是您在每个循环上都执行绑定点击事件。以不同的方式执行此操作是否更好。