我有一个HTML下拉列表，我找到了一个答案，以便从选项中排除重复项：
[].slice.call(country.options)
.map(function(a){
if(this[a.innerText]){
country.removeChild(a);
} else {
this[a.innerText]=1;
}
},{});<select id="country">
<option value="USA">United States</option>
<option value="Ind">India</option>
<option value="NZ" selected>New Zealand</option>
<option value="NZ" >New Zealand</option>
<option value="SA">South Africa</option>
<option value="UK">United Kingdom</option>
<option value="UK">United Kingdom</option>
<option value="JP">Japan</option>
</select>
效果很好，因为它基于重复的值。
我现在正在从JSON字符串将数据加载到HTML表中，在使用JS聚合后，我正在为某些列创建一个下拉过滤器。我已经设法删除重复项：
if(!rate_filter.includes(result[i][5]))
{
rate_filter +='<option value="' + i + '">' + result[i][5] + '</option>';
}
但它并不总是有效。假设我们在下拉列表中有以下值：
我的脚本将排除'AAAA'值，因为它包含在'AAAA＆amp; CCCC'字符串。
所以，我要么删除IF语句，然后使用这个脚本（如果我将我的类转换为id，则可以使用）：
[].slice.call(rate_filter1.options)
.map(function(a){
if(this[a.innerText]){
country.removeChild(a);
} else {
this[a.innerText]=1;
}
},{});
在这种情况下不起作用，因为options中的值不同（0,1,2,3等）：
<select id="rate_filter1" >
<option value="0">desktop & mobile</option>
<option value="1">mobile</option>
<option value="2">mobile</option>
<option value="3">mobile</option>
</select>
或者，我必须更改脚本的一部分：
if(!rate_filter.includes(result[i][5]) || result[i][5] != result[i-1][5])
{
rate_filter +='<option value="' + i + '">' + result[i][5] + '</option>';
}
有什么建议吗？我已经在下面粘贴了两个不同版本的过滤器。我想我需要在IF语句中添加一些内容才能删除重复内容。一定非常接近。
//Load JSON data
var data = {"headers":["Plat","Head2","Head3","Head4","Head5","Head6","Head7","Head8","Head9","Head10","Head11","Head12","Head13","Head14","Head15","Head16","random2","Head18","Head19"],"rows":[["plat1","video","random1","video page post","RR1","desktop & mobile","f-16-24+beauty",784.23,463310,1.6926679760851266,66476,0.011797189963295023,0.14348060693703998,0,0,0,66766,0.011745948536680347,0.14410653773931062],["plat1","video","random1","video page post","RR1","desktop & mobile","f-25-34+beauty",524.61,295454,1.7756063549655785,51223,0.01024168830408215,0.17337047391472107,0,0,0,51484,0.010189767694817808,0.1742538601609726],["plat2","display","random1","insta-stories","RR1","mobile","f-16-24+beauty",182.69,218348,0.836691886346566,8025,0.022765109034267914,0.03675325626980783,0,0,0,8025,0.022765109034267914,0.03675325626980783],["plat2","video","random1","video page post","RR1","mobile","f-16-24+beauty",178.66,99419,1.7970408070891881,17355,0.01029443964275425,0.17456421810720285,0,0,0,17770,0.010054023635340461,0.1787384705136845],["plat2","video","random1","insta-stories","RR1","mobile","f-25-34+beauty",123.11,96635,1.2739690588296166,5335,0.023075913776944703,0.05520774046670461,0,0,0,5335,0.023075913776944703,0.05520774046670461],["plat2","video","random1","video page post","RR1","mobile","f-25-34+beauty",120.87,55882,2.1629505028452813,12175,0.009927720739219712,0.21786979707240256,0,0,0,12340,0.009794975688816857,0.22082244729966716],["plat1","display","random1","photo page post","RR2","desktop & mobile","f-16-24+beauty",47.67,35864,1.3291880437207229,0,0,0,0,0,0,54,0.8827777777777778,0.0015056881552531786],["plat1","display","random1","photo page post","RR2","desktop & mobile","f-25-34+beauty",32.949999999999996,24020,1.3717735220649456,0,0,0,0,0,0,29,1.136206896551724,0.0012073272273105745],["plat1","video","random1","video page post","RR1","desktop & mobile","f-25-34",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-16-24",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-25-34",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-25-34",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","desktop & mobile","f-16-24",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","display","random1","photo page post","RR2","desktop & mobile","f-25-35",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","desktop & mobile","f-25-35",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","desktop & mobile","f-16-24",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-16-25",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-16-26",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-25-35",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","desktop & mobile","f-16-24+lookalike",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-16-24",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","desktop & mobile","f-22-34",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat2","display","random1","photo page post","RR2","mobile","f-21-35",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-28-34",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat2","display","random1","photo page post","RR2","mobile","f-16-26",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","desktop & mobile","f-25-34",null,null,0,null,0,"NaN",null,0,0,null,0,0]]};
//Aggregate
function transformData(rows) {
const
rowMap = new Map(),
result = [];
// Iterate over the rows.
rows.forEach(row => {
const
// Create a key, it is the first elements joined together.
key = row.slice(0,5).join();
// Check if the Map has the generated key...
if (rowMap.has(key)) {
// The map has the key, we need to add up the values
const
// Get the value for the current key.
storedRow = rowMap.get(key);
// Add the value of the current row to the row in the map.
storedRow[7] += row[7];
storedRow[8] += row[8];
storedRow[9] += row[9];
storedRow[10] += row[10];
storedRow[11] += row[11];
storedRow[12] += row[12];
storedRow[13] += row[13];
storedRow[14] += row[14];
storedRow[15] += row[15];
storedRow[16] += row[16];
storedRow[17] += row[17];
storedRow[18] += row[18];
} else {
// The key doens't exist yet, add the row to the map.
rowMap.set(key, row);
}
});
// Iterate over all the entries in the map and push each value with the
// summed up value into the array.
rowMap.forEach(value => {
result.push(value);
});
//Create the filter
var rate_filter = '<div class = "filter"><select multiple class="rate_filter1" data-col="0">';
for (i = 0; i < result.length; i++)
{
var j = 0;
if(i > 1)
{
j == i-1;
}
else
{
j == 0;
}
//Check for duplicates
if(!rate_filter.includes(result[i][5]) || result[i][5] != result[j][5])
{
rate_filter +='<option value="' + i + '">' + result[i][5] + '</option>';
}
}
rate_filter +='</select></div>';
$("#one").html(rate_filter);
//Second Version
var general_filter = '<div class = "filter"><select multiple class="general_filter1" data-col="1">';
for (i = 0; i < result.length; i++)
{
if(i > 1)
{
j == i-1;
}
else
{
j == 0;
}
//if((!general_filter.includes(result[i][5])) && (result[i][5] != result[j][5]))
if(i==0 || result[i][5] != result[j][5])
{
general_filter +='<option value="' + i + '">' + result[i][5] + '</option>';
}
}
general_filter +='</select></div>';
$("#two").html(general_filter);
}
data.rows = transformData(data.rows);<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<div id="one"></div>
<div id="two"></div>
答案 0 :(得分：2)
您的解决方案无法正常工作的原因是您在字符串（.includes()）上使用rate_filter，而不是数组。因此，使用此逻辑if(!rate_filter.includes(...))进行比较无效。
如果您想要生成一个唯一的设备列表（我称之为devices只是因为价值＆＃34;移动＆＃34;以及＆＃34;桌面和移动＆＃34;您＆＃39 ;在你的代码中提供，理论上它可以命名为其他东西），它很简单：你只需要按照以下步骤操作：
device字段（由5的索引标识）来检查，并检查它们是否已存在于数组中
如果你看一下上面的逻辑，你的代码可以像这样编写：
// Store unique array of devices
const devices = [];
// Iterate through your results
result.forEach(item => {
// Convert to lowercase to allow for easy comparison
const device = item[5].toLowerCase();
// If exists, don't do anything
if (devices.includes(device))
return false;
// If does not exist, add it to the unique list and write to HTML
devices.push(device);
rate_filter +='<option value="' + device + '">' + device + '</option>';
});
请参阅下面的概念验证代码：
//Load JSON data
var data = {"headers":["Plat","Head2","Head3","Head4","Head5","Head6","Head7","Head8","Head9","Head10","Head11","Head12","Head13","Head14","Head15","Head16","random2","Head18","Head19"],"rows":[["plat1","video","random1","video page post","RR1","desktop & mobile","f-16-24+beauty",784.23,463310,1.6926679760851266,66476,0.011797189963295023,0.14348060693703998,0,0,0,66766,0.011745948536680347,0.14410653773931062],["plat1","video","random1","video page post","RR1","desktop & mobile","f-25-34+beauty",524.61,295454,1.7756063549655785,51223,0.01024168830408215,0.17337047391472107,0,0,0,51484,0.010189767694817808,0.1742538601609726],["plat2","display","random1","insta-stories","RR1","mobile","f-16-24+beauty",182.69,218348,0.836691886346566,8025,0.022765109034267914,0.03675325626980783,0,0,0,8025,0.022765109034267914,0.03675325626980783],["plat2","video","random1","video page post","RR1","mobile","f-16-24+beauty",178.66,99419,1.7970408070891881,17355,0.01029443964275425,0.17456421810720285,0,0,0,17770,0.010054023635340461,0.1787384705136845],["plat2","video","random1","insta-stories","RR1","mobile","f-25-34+beauty",123.11,96635,1.2739690588296166,5335,0.023075913776944703,0.05520774046670461,0,0,0,5335,0.023075913776944703,0.05520774046670461],["plat2","video","random1","video page post","RR1","mobile","f-25-34+beauty",120.87,55882,2.1629505028452813,12175,0.009927720739219712,0.21786979707240256,0,0,0,12340,0.009794975688816857,0.22082244729966716],["plat1","display","random1","photo page post","RR2","desktop & mobile","f-16-24+beauty",47.67,35864,1.3291880437207229,0,0,0,0,0,0,54,0.8827777777777778,0.0015056881552531786],["plat1","display","random1","photo page post","RR2","desktop & mobile","f-25-34+beauty",32.949999999999996,24020,1.3717735220649456,0,0,0,0,0,0,29,1.136206896551724,0.0012073272273105745],["plat1","video","random1","video page post","RR1","desktop & mobile","f-25-34",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-16-24",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-25-34",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-25-34",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","desktop & mobile","f-16-24",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","display","random1","photo page post","RR2","desktop & mobile","f-25-35",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","desktop & mobile","f-25-35",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","desktop & mobile","f-16-24",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-16-25",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-16-26",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-25-35",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","desktop & mobile","f-16-24+lookalike",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-16-24",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","desktop & mobile","f-22-34",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat2","display","random1","photo page post","RR2","mobile","f-21-35",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","mobile","f-28-34",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat2","display","random1","photo page post","RR2","mobile","f-16-26",null,null,0,null,0,"NaN",null,0,0,null,0,0],["plat1","video","random1","video page post","RR1","desktop & mobile","f-25-34",null,null,0,null,0,"NaN",null,0,0,null,0,0]]};
//Aggregate
function transformData(rows) {
const
rowMap = new Map(),
result = [];
// Iterate over the rows.
rows.forEach(row => {
const
// Create a key, it is the first elements joined together.
key = row.slice(0,5).join();
// Check if the Map has the generated key...
if (rowMap.has(key)) {
// The map has the key, we need to add up the values
const
// Get the value for the current key.
storedRow = rowMap.get(key);
// Add the value of the current row to the row in the map.
storedRow[7] += row[7];
storedRow[8] += row[8];
storedRow[9] += row[9];
storedRow[10] += row[10];
storedRow[11] += row[11];
storedRow[12] += row[12];
storedRow[13] += row[13];
storedRow[14] += row[14];
storedRow[15] += row[15];
storedRow[16] += row[16];
storedRow[17] += row[17];
storedRow[18] += row[18];
} else {
// The key doens't exist yet, add the row to the map.
rowMap.set(key, row);
}
});
// Iterate over all the entries in the map and push each value with the
// summed up value into the array.
rowMap.forEach(value => {
result.push(value);
});
//Create the filter
var rate_filter = '<div class="filter"><select multiple class="rate_filter1" data-col="0">';
// Create unique index of devices
const devices = [];
result.forEach(item => {
const device = item[5].toLowerCase();
if (devices.includes(device))
return false;
rate_filter +='<option value="' + device + '">' + device + '</option>';
devices.push(device);
});
rate_filter +='</select></div>';
$("#one").html(rate_filter);
}
data.rows = transformData(data.rows);<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<div id="one"></div>
<div id="two"></div>