0

我需要在表单上创建一个列表

<li>
    <span class="room">A20</span>
    <span class="dropin">3</span>
    <span class="appoint">1</span>
    <span class="delay">20</span>
</li>
<li>
    <span class="room">A21</span>
    <span class="dropin">2</span>
    <span class="appoint">1</span>
    <span class="delay">10</span>
</li>

使用表单上 json 对象的值。

data = [
    { "name": "A20 Dropin", "queueType": "QUEUE", "customers": 3, "delay": 0 },
    { "name": "A20 Appoint", "queueType": "APP_QUEUE", "customers": 1, "delay": 20 },
    { "name": "A21 Appoint", "queueType": "APP_QUEUE", "customers": 1, "delay": 10 },
    { "name": "A21 Dropin", "queueType": "QUEUE", "customers": 2, "delay": 0 }
];

问题是从每个其他对象中获取名称（例如 A20），但仍然从每个对象中获取客户。

  • 延迟总是来自 APP_QUEUE。
  • 总是有一对房间，例如A20 Dropin和A20 Apppoint
  • 这些对象可能没有按顺序排列，所以我需要先对它们进行排序，可能是在名称上。

我在这里在 jsfiddle 中设置了一个示例！但是代码会打印每个对象，而不是我想要的形式。

4

2 回答 2

2

尝试

//normalize the data
var map = {}, array = [];
$.each(data, function (idx, value) {
    var key = value.name.match(/^.\d+/)[0];
    var item = map[key];
    if (!item) {
        item = {
            key: key,
            name: value.name
        };
        map[key] = item;
        array.push(item)
    }
    if (value.queueType == 'QUEUE') {
        item.dropin = value.customers;
    } else if (value.queueType == 'APP_QUEUE') {
        item.appoint = value.customers;
        item.delay = value.delay
    }
})

var html = $.map(array, function (item) {
    return '<li><span class="room">' + item.key + '</span><span class="dropin">' + item.dropin + '</span><span class="appoint">' + item.appoint + '</span><span class="delay">' + item.delay + '</span></li>';
}).join('');
$('ul').append(html);

演示：小提琴

于 2013-10-30T12:23:11.837 回答
0 
$(data).each(function(i,v){
 var a = v.name.split()[0];
 var d = v.name.split()[1];
 var $span = $('span[data-a="'+a+'"]');
 var $li = null;
 if(span.length){
   $li = $span.closest('li');
 }
 else{
   //create li and whole of the structure
   $li = $('<li></li>');
 }

 //do rest of the dom changes here based on the value of d
 ....
 //at last
 $cont.append($li)/*the container element*/
});
于 2013-10-30T12:06:58.560 回答