Return 仅来自 Javascript 数组中的唯一对象
Return only unique objects from an array in Javascript
具有以下数组:
const arr = [{ id: 'A', version: 0, name: 'first' },
{ id: 'A', version: 1, name: 'first' },
{ id: 'B', version: 0, name: 'second' },
{ id: 'A', version: 2, name: 'first' },
{ id: 'B', version: 1, name: 'second' }];
我需要将其用作两个下拉菜单的输入。
对于第一个下拉列表,它应该只在列表中显示两个值,A
和 B
。
为此:
const firstDropdownOptions = [...new Set(arr.map((el) => el.id))];
不幸的是,此 returns ['A', 'B']
不包含有关其他属性的任何信息。
这样会更有用:
[{ id: 'A', version: '0', name: 'first' }, { id: 'B', version: '0', name: 'second' }]
关于如何return上面的数组有什么想法吗?
我找到了解决这个问题的简短方法:
const result = arr.filter((value, index, self) => {
return self.findIndex(v => v.id === value.id) === index
});
您可以按 id
分组,然后通过选择第一个 select
来设置第二个 select
的所有选项。
const
setOptions = id => groups[id].forEach(o => {
const option = document.createElement('option');
option.value = o.version;
option.innerHTML = o.version;
second.appendChild(option);
});
data = [{ id: 'A', version: 0, name: 'first' }, { id: 'A', version: 1, name: 'first' }, { id: 'B', version: 0, name: 'second' }, { id: 'A', version: 2, name: 'first' }, { id: 'B', version: 1, name: 'second' }],
first = document.createElement('select'),
second = document.createElement('select'),
groups = data.reduce((r, o) => ((r[o.id] ??= []).push(o), r), {});
document.body.appendChild(first);
document.body.appendChild(document.createTextNode(' '));
document.body.appendChild(second);
Object.keys(groups).forEach(k => {
const option = document.createElement('option');
option.value = k;
option.innerHTML = k;
first.appendChild(option);
});
setOptions('A');
first.addEventListener('change', function (event) {
let i = second.options.length;
while (i--) second.remove(i);
setOptions(first.value);
});
观察: 因为您只在 array.map()
方法中返回 id。因此,它只为您提供新数组中唯一的 ID [A, B]
。要获取所有其他属性,您必须通过条件获取以检查是否 version === 0
.
工作演示:
const arr = [{ id: 'A', version: 0, name: 'first' },
{ id: 'A', version: 1, name: 'first' },
{ id: 'B', version: 0, name: 'second' },
{ id: 'A', version: 2, name: 'first' },
{ id: 'B', version: 1, name: 'second' }];
const firstDropdownData = arr.filter((obj) => obj.version === 0);
console.log(firstDropdownData);
具有以下数组:
const arr = [{ id: 'A', version: 0, name: 'first' },
{ id: 'A', version: 1, name: 'first' },
{ id: 'B', version: 0, name: 'second' },
{ id: 'A', version: 2, name: 'first' },
{ id: 'B', version: 1, name: 'second' }];
我需要将其用作两个下拉菜单的输入。
对于第一个下拉列表,它应该只在列表中显示两个值,A
和 B
。
为此:
const firstDropdownOptions = [...new Set(arr.map((el) => el.id))];
不幸的是,此 returns ['A', 'B']
不包含有关其他属性的任何信息。
这样会更有用:
[{ id: 'A', version: '0', name: 'first' }, { id: 'B', version: '0', name: 'second' }]
关于如何return上面的数组有什么想法吗?
我找到了解决这个问题的简短方法:
const result = arr.filter((value, index, self) => {
return self.findIndex(v => v.id === value.id) === index
});
您可以按 id
分组,然后通过选择第一个 select
来设置第二个 select
的所有选项。
const
setOptions = id => groups[id].forEach(o => {
const option = document.createElement('option');
option.value = o.version;
option.innerHTML = o.version;
second.appendChild(option);
});
data = [{ id: 'A', version: 0, name: 'first' }, { id: 'A', version: 1, name: 'first' }, { id: 'B', version: 0, name: 'second' }, { id: 'A', version: 2, name: 'first' }, { id: 'B', version: 1, name: 'second' }],
first = document.createElement('select'),
second = document.createElement('select'),
groups = data.reduce((r, o) => ((r[o.id] ??= []).push(o), r), {});
document.body.appendChild(first);
document.body.appendChild(document.createTextNode(' '));
document.body.appendChild(second);
Object.keys(groups).forEach(k => {
const option = document.createElement('option');
option.value = k;
option.innerHTML = k;
first.appendChild(option);
});
setOptions('A');
first.addEventListener('change', function (event) {
let i = second.options.length;
while (i--) second.remove(i);
setOptions(first.value);
});
观察: 因为您只在 array.map()
方法中返回 id。因此,它只为您提供新数组中唯一的 ID [A, B]
。要获取所有其他属性,您必须通过条件获取以检查是否 version === 0
.
工作演示:
const arr = [{ id: 'A', version: 0, name: 'first' },
{ id: 'A', version: 1, name: 'first' },
{ id: 'B', version: 0, name: 'second' },
{ id: 'A', version: 2, name: 'first' },
{ id: 'B', version: 1, name: 'second' }];
const firstDropdownData = arr.filter((obj) => obj.version === 0);
console.log(firstDropdownData);