Question

我试图通过Jquery遍历JSON对象。由于某种原因，它没有正确循环..它似乎一直循环到最后，但我想在我的对象中获取每个单独的属性。我正在使用一个For（var in）循环，它正确地循环我的对象，但它有点关闭.. MyAny帮助将是glady赞赏..非常感谢!!!我可以提供一个快速链接到我的网站，如果需要，可以模拟代码。我还添加了更多代码和html通过元素使用..Hint ***更多如果 - 条件语句检查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

    });

});

另一件似乎不正确的事情是你在每个循环上进行绑定点击事件。以不同的方式做到这一点会更好。

如何循环通过值集对JSON对象

1 个答案: