推新值數組，如果屬性相匹配，通過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);