Titus Shoats Titus Shoats - 6 months ago 14
JSON Question

How To Loop Through Set Of Value Pairs JSON Object

im trying to loop through a JSON object via Jquery. For some reason its not looping right.. It seems to be looping all the way to the end, But I would like to get each individually property in my object. Im using a For(var in) loop which loops through my object correctly but its a bit off.. MyAny help would be glady appreciated.. thanks so much!!! I can provide a quick link to my website that has mock up of the code if needed..
Ive also added more code and html via elements that using ..Hint*** Theres more if - conditional statements that checks for sounds_like,sounds_price... The first JSON Object works with no problem, its the second JSON object that im using with the pop over thats causing me trouble

<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 Object Below

[{"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

When you loop a complex object using a for var in loop, you will always have unexpected behaviors because of how this loop works.

To avoid such problems and if you need to use this type of loop, I recommend you do the following:

Example:

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

EDIT 1:

I'm not sure what you're trying to do but using jquery you can do the following:

$.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

    });

});

Another thing that does not seem right is that you're doing bind click event on each loop. Is it better to do this differently.

Comments