Как перебрать множество пар значений JSON-объект

Question

Как перебрать множество пар значений JSON-объект

0

im пытается пропустить JSON-объект через JQuery. По какой-то причине он не зацикливается правильно. Кажется, что он полностью зацикливается до конца, но я хотел бы получить каждое индивидуальное свойство в моем объекте. Я использую цикл For (var in), который правильно проверяет мой объект, но его немного отключает. Помощь MyAny была бы оценена сладко.. спасибо большое! Я могу предоставить быструю ссылку на мой веб-сайт, который при необходимости придумал код. Ive также добавил больше кода и html через элементы, которые используют..Hint *** Theres more if - условные операторы, которые проверяют звуковые_подобные, sounds_price... Первый объект JSON работает без проблем, его второй объект JSON, который im использует с поп файлом, что вызывает у меня проблемы

    <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"}
]

Titus Shoats 23 окт. 2013, в 00:08

Источник

1

Почему вы добавляете новый обработчик кликов для каждой итерации?
SLaks 22 окт. 2013, в 22:00
0

В чем проблема?
SLaks 22 окт. 2013, в 22:00
0

попробуйте преобразовать json в объект javascript с помощью jquery's parseJSON() затем переберите созданный объект api.jquery.com/jQuery.parseJSON
UDB 22 окт. 2013, в 22:05
0

@ Slaks, я добавляю обработчик кликов, потому что для каждого элемента, у которого есть событие, мое всплывающее окно показывает или скрывает свой фон с помощью селекторов ('.close-btn'), ('overlay-bg') и (' .overlay-bg '), все обработчики ave присоединяются к ним .. но я не думаю, что это причина того, что мой цикл не зацикливается правильно ..
Titus Shoats 22 окт. 2013, в 22:08
0

Ваша логика кода не имеет смысла. Второй $.each() будет выполнять итерацию каждого свойства объекта в массиве, и вы будете устанавливать обработчик щелчка на .show-popup для каждого свойства каждого объекта. Я действительно сомневаюсь, что это то, что вы хотите. Это означает, что вы будете устанавливать 24 обработчика кликов на один и тот же объект.
jfriend00 22 окт. 2013, в 22:08
0

@RicoPlasakoi: эти селекторы будут применяться ко всем элементам на всей странице , а не только к каждому элементу в отдельности. При каждом щелчке по всплывающему окну вы будете прикреплять массы слушателей событий к DOM.
Bergi 22 окт. 2013, в 22:10
0

@jfriend && Bergi ... Итак, удаление второго $ .each () должно исключить возможность подключения нескольких обработчиков кликов к DOM ... Большое спасибо
Titus Shoats 22 окт. 2013, в 22:17
0

Вам придется описать то, что вы действительно пытаетесь достичь. Обработчики событий, вероятно, должны быть удалены из обоих циклов. Я собирался показать вам, как это сделать, но я не понимаю, что вы на самом деле пытаетесь сделать. Возможно, нам также понадобится увидеть соответствующий HTML.
jfriend00 22 окт. 2013, в 22:25
0

@ Хорошо, я вставил свой HTML, который я использую для этого кода, в снимке у меня есть другой код, который создает элементы динамически (divs, изображения), и когда пользователь нажимает на каждый элемент, я хочу, чтобы всплывающее окно показывало, что каждый элемент извлек из моего объекта JSON, такого как .. (sound_desc, sounds_like) .... У меня есть другие элементы для правильного рендеринга и отображения моих объектов JSON, но при циклическом отображении моих данных JSON внутри всплывающего окна немного странно ..
Titus Shoats 22 окт. 2013, в 22:35

Показать ещё 7 комментариев

Теги:

php

javascript

jquery

json

1 ответ

Ещё вопросы

Почему вы добавляете новый обработчик кликов для каждой итерации?
попробуйте преобразовать json в объект javascript с помощью jquery's parseJSON() затем переберите созданный объект api.jquery.com/jQuery.parseJSON
@ Slaks, я добавляю обработчик кликов, потому что для каждого элемента, у которого есть событие, мое всплывающее окно показывает или скрывает свой фон с помощью селекторов ('.close-btn'), ('overlay-bg') и (' .overlay-bg '), все обработчики ave присоединяются к ним .. но я не думаю, что это причина того, что мой цикл не зацикливается правильно ..
Ваша логика кода не имеет смысла. Второй $.each() будет выполнять итерацию каждого свойства объекта в массиве, и вы будете устанавливать обработчик щелчка на .show-popup для каждого свойства каждого объекта. Я действительно сомневаюсь, что это то, что вы хотите. Это означает, что вы будете устанавливать 24 обработчика кликов на один и тот же объект.
@RicoPlasakoi: эти селекторы будут применяться ко всем элементам на всей странице , а не только к каждому элементу в отдельности. При каждом щелчке по всплывающему окну вы будете прикреплять массы слушателей событий к DOM.
@jfriend && Bergi ... Итак, удаление второго $ .each () должно исключить возможность подключения нескольких обработчиков кликов к DOM ... Большое спасибо
Вам придется описать то, что вы действительно пытаетесь достичь. Обработчики событий, вероятно, должны быть удалены из обоих циклов. Я собирался показать вам, как это сделать, но я не понимаю, что вы на самом деле пытаетесь сделать. Возможно, нам также понадобится увидеть соответствующий HTML.
@ Хорошо, я вставил свой HTML, который я использую для этого кода, в снимке у меня есть другой код, который создает элементы динамически (divs, изображения), и когда пользователь нажимает на каждый элемент, я хочу, чтобы всплывающее окно показывало, что каждый элемент извлек из моего объекта JSON, такого как .. (sound_desc, sounds_like) .... У меня есть другие элементы для правильного рендеринга и отображения моих объектов JSON, но при циклическом отображении моих данных JSON внутри всплывающего окна немного странно ..

Sandcar · Accepted Answer · 2013-10-22T20-17-00.000Z

Когда вы зацикливаете сложный объект, используя цикл for for var, у вас всегда будет неожиданное поведение из-за того, как работает этот цикл.

Чтобы избежать таких проблем, и если вам нужно использовать этот тип цикла, я рекомендую вам сделать следующее:

Пример:

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

    });

});

Еще одна вещь, которая кажется неправильной, заключается в том, что вы делаете событие click click для каждого цикла. Лучше делать это по-другому.

Но OP не является использование for петли для цикла. Они используют итерацию jQuery. Так что нет причин переключаться на это.
@ Sandcar, я пробовал это много раз, но мои свойства не отображаются правильно ..
@ Scandcar зацикливался на каждом объекте так, как ты его описал !! Спасибо