推新值数组，如果属性相匹配，通过HTML项目

Question

1. 迭代并将它们推到一个数组
2. 如果项目名称在数组中的对象的name属性已经一致，只是增加它的数据到该对象。

我试着寻找几个不同的答案，但最终与控制台错误或覆盖我现有的数据。

var item = {}; 
 
var items = []; 
 

 
$('li').each(function() { 
 
    var itemName = $(this).find('.name').text(); 
 
    var itemData = $(this).find('.data').text(); 
 
    
 
    //for(var i = 0, lens = items.length; i < 1; i++) { 
 
    // if(items[i].name === itemName) { 
 
    //   ? 
 
    // } 
 
    //} 
 

 
    item = { 
 
     name: itemName, 
 
     data: itemData 
 
    } 
 
    items.push(item); 
 
});

<li> 
 
    <span class="name">Item 1</span> 
 
    <span class="data">3</span> 
 
</li> 
 
<li> 
 
    <span class="name">Item 1</span> 
 
    <span class="data">6</span> 
 
</li> 
 
<li> 
 
    <span class="name">Item 1</span> 
 
    <span class="data">9</span> 
 
</li> 
 
<li> 
 
    <span class="name">Item 2</span> 
 
    <span class="data">3</span> 
 
</li> 
 
<li> 
 
    <span class="name">Item 2</span> 
 
    <span class="data">6</span> 
 
</li>

Answer 1

这个代码将实现自己的目标：

var items = {}; 

$('li').each(function() { 
    var itemName = $(this).find('.name').text(); 
    var itemData = $(this).find('.data').text(); 

    items[itemName] = items[itemName] || []; 
    items[itemName].push(itemData); 
}); 

var result = Object.keys(items).map(function(name) { 
    return {name: name, data: items[name]}; 
}); 

console.log(result); 

更新1：（添加其他属性）

var items = {}; 

$('li').each(function() { 
    var itemName = $(this).find('.name').text(); 
    var itemData = $(this).find('.data').text(); 

    items[itemName] = items[itemName] || {name: itemName}; 
    //Add data 
    items[itemName].data = items[itemName].data || []; 
    items[itemName].data.push(itemData); 
    //Add other property 
    items[itemName].time = Date.now(); 
}); 

var result = Object.keys(items).map(function(name) { 
    return items[name]; 
}); 

演示：

var item = {}; 
 
var items = {}; 
 

 
$('li').each(function() { 
 
    var itemName = $(this).find('.name').text(); 
 
    var itemData = $(this).find('.data').text(); 
 
    
 
    items[itemName] = items[itemName] || []; 
 
    items[itemName].push(itemData); 
 
}); 
 

 
var result = Object.keys(items).map(function(name) { 
 
    return {name: name, data: items[name]}; 
 
}); 
 

 
console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<li> 
 
    <span class="name">Item 1</span> 
 
    <span class="data">3</span> 
 
</li> 
 
<li> 
 
    <span class="name">Item 1</span> 
 
    <span class="data">6</span> 
 
</li> 
 
<li> 
 
    <span class="name">Item 1</span> 
 
    <span class="data">9</span> 
 
</li> 
 
<li> 
 
    <span class="name">Item 2</span> 
 
    <span class="data">3</span> 
 
</li> 
 
<li> 
 
    <span class="name">Item 2</span> 
 
    <span class="data">6</span> 
 
</li>

Answer 2

var item = {}; 
var items = []; 

$('li').each(function() { 
    var itemName = $(this).find('.name').text(); 
    var itemData = $(this).find('.data').text(); 

    var add_new = true; 
    for(var i = 0, lens = items.length; i < lens; i++) { 
     if(items[i].name === itemName) { 
      items[i].data.push(itemData); 
      add_new = false; 
     } 
    } 
    if (add_new) { 
     item = { 
      name: itemName, 
      data: [itemData] 
     } 
     items.push(item); 
    } 
}); 
console.log(items);