отображать количество элементов в месяц, используя оператор JSON jquery each () IF (для цикла?)

У меня есть объект данных JSON, содержащий товары и их продажи, перечисленные по месяцам. Я хотел бы перечислить продажи товаров в месяц внутри DIV вместе с другой информацией о каждом элементе.

Вот мой объект JSON:

var my_object= [{"item_id":"11","month":"February","sales":"7"}, {"item_id":"4","month":"February","sales":"2"},{"item_id":"11","month":"March","sales":"1"},{"item_id":"4","month":"March","sales":"2"}]

вот как я хотел бы, чтобы окончательный HTML выглядел:

<ul><li><button value="4">item_id_4</button><div>where the item_4 sales/month (i.e., 2,2) should go</div></li>
<li><button value="11">item_id_11</button><div>where the item_11 sales/month (i.e, 7,1) should go</div></li></ul>

наконец, вот моя еще не правильная попытка jquery/javascript отобразить количество элементов в месяц.

$(function(){   
$('button').each(function(){

var my_object = [{"item_id":"11","month":"February","sales":"7"},  {"item_id":"4","month":"February","sales":"2"},{"item_id":"11","month":"March","sales":"1"},{"item_id":"4","month":"March","sales":"2"}];

var button_value=$(this).val();

 $.each(my_object, function(i,item){

  if(item.item_id==button_value){       
    $('div').append(item.sales);
        } 

    });
}); 
});

В нынешнем виде этот скрипт отображает продажи для обоих товаров в КАЖДОМ div, то есть 2,2,7,1, вместо того, чтобы просто отображать 2,2 и 7,1 в соответствующих разделах item_id_4 и item_id_11 по отдельности. Это создает впечатление, что оператор if делает по крайней мере что-то правильное в том смысле, что продажи предметов «my_object» перечислены в порядке значения кнопки, а не в том порядке, в котором они упорядочены в «my_object».

Я не уверен, связана ли проблема с функциями each(), оператором IF или, может быть, с чем-то еще, не упомянутым здесь. Любая помощь в исправлении этого сценария будет принята с благодарностью!


json if-statement for-loop jquery each
person tim peterson    schedule 01.10.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ваш сценарий работает нормально, за исключением строки добавления, где вы указываете jQuery выбрать все элементы div на странице и добавить к ним данные о продажах. Очевидно, это не совсем то, что вы хотели. :)

Используя вашу текущую структуру HTML, изменение этой строки для выбора следующего div, похоже, работает. (Я также сохранил текущую кнопку в $this.)

$this.next("div").append(item.sales);

Код здесь http://jsfiddle.net/meloncholy/ZhrZU/

person meloncholy    schedule 01.10.2011
comment
Привет, meloncholy, большое спасибо за ваш ответ, если можно, один дополнительный вопрос: вместо ‹div›22‹/div› я бы хотел, чтобы это было ‹div›2,2‹/div›. Можете ли вы посоветовать, как исключить цитаты и добавить запятые между каждым item.sales (отметив, что я не хочу запятую после последнего item.sales)? Спасибо! -Тим - person tim peterson; 01.10.2011
comment
Я не вижу кавычки в браузерах, которые я только что пробовал. Если у вас есть проблемы, вы можете попробовать parseInt(). Чтобы удалить последнюю запятую, вы можете добавить еще один итератор для каждого элемента div, что-то вроде этого jsfiddle.net/meloncholy /ZhrZU/1 Очевидно, было бы целесообразно сделать этот код немного быстрее, кэшируя $(this) и, возможно, $(this).html(). - person meloncholy; 01.10.2011
comment
Привет, мелонхолия, да, это странно, цитаты появляются в инструментах разработчика Chrome, но не в Firebug. Другие вещи: я заметил, что item.sales не становится частью исходного кода, потому что эти значения отображаются на стороне клиента? Кроме того, не могли бы вы немного подробнее объяснить, что вы имеете в виду под кэшированием $(this) и $(this).html? спасибо, я обещаю, что это все вопросы! с наилучшими пожеланиями, тим - person tim peterson; 01.10.2011
comment
А, хорошо, это имеет смысл. Chrome иногда ставит кавычки (и дополнительные пробелы) в Dev Tools, но на самом деле их там нет — если вы не видите их на странице, в принципе все в порядке. :) Я предполагаю, что это помогает людям видеть, когда их сервер отправляет строки с длинными кусками пробела впереди. Ре. кеширование: все, что я имел в виду, это хранить $(this) в переменной внутри каждого, чтобы вы не вызывали jQuery для него три раза, и аналогично для $(this).html(). - person meloncholy; 01.10.2011
comment
Хорошо, спасибо за совет по кэшированию! ваши комментарии были действительно полезны, с наилучшими пожеланиями, -tim - person tim peterson; 01.10.2011
comment
Без проблем! Рад, что смог помочь. - person meloncholy; 01.10.2011

arrow_upward
0
arrow_downward

Попробуйте следующее

$(function(){   

    var my_object = [{"item_id":"11","month":"February","sales":"7"},  {"item_id":"4","month":"February","sales":"2"},{"item_id":"11","month":"March","sales":"1"},{"item_id":"4","month":"March","sales":"2"}];

    for (var i in my_object) {
        var cur = my_object[i];
        $('button[value=' + cur.item_id + ']').each(function() {
            var msg = 'Sales Month: ' + cur.month + ' Number: ' + cur.sales;
            $(this).parent().append('<div>' + msg + '</div>');
        });
    }
});

Я не совсем был уверен, каким должен быть исходный HTML-код, но я предположил следующее.

<ul><li><button value="4"></button></li>
<li><button value="11"></button></li></ul>

Скрипт: http://jsfiddle.net/HdgmN/

person JaredPar    schedule 01.10.2011
comment
Спасибо, Джаред, если возможно, могу ли я побеспокоить вас одним дополнительным вопросом: как я могу изменить ваш скрипт так, чтобы cur.sales для каждого элемента оказались в одном и том же DIV? еще раз спасибо! -Тим - person tim peterson; 01.10.2011