遍历对象数组中的嵌套对象数组
Iterate through nested array of object in an Array of objects
尝试用所有独特的硬币制作一个 select 过滤器,但没有正确地结束。
当遍历数据时,我可以得到一个所有硬币的列表。
const uniqueCoins = data.map((item) => {
item.currencies.map((subItem) =>
console.log(subItem))
});
我还想使用 Set 方法和扩展运算符来获取唯一值,但我不确定如何组合所有这些。
const data = [
{
id: "1",
name: "Digitec",
description: "Wir akzeptieren folgende Kryptowährungen",
currencies: [
{coin: "Bitcoin"},
{coin: "Ethereum"},
{coin: "XRP"},
],
link: "webseite besuchen",
},
{
id: "2",
name: "Galaxus",
description: "Wir akzeptieren folgende Kryptowährungen",
currencies: [
{coin: "Bitcoin"},
{coin: "Monero"},
{coin: "XRP"},
],
link: "webseite besuchen",
},
{
id: "3",
name: "Brack.ch",
description: "Wir akzeptieren folgende Kryptowährungen",
currencies: [
{coin: "Litecoin"},
{coin: "Dogecoin"},
{coin: "XRP"},
],
link: "Onlineshop besuchen",
},
];
const data = [
{
id: "1",
name: "Digitec",
description: "Wir akzeptieren folgende Kryptowährungen",
currencies: [
{coin: "Bitcoin"},
{coin: "Ethereum"},
{coin: "XRP"},
],
link: "webseite besuchen",
},
{
id: "2",
name: "Galaxus",
description: "Wir akzeptieren folgende Kryptowährungen",
currencies: [
{coin: "Bitcoin"},
{coin: "Monero"},
{coin: "XRP"},
],
link: "webseite besuchen",
},
{
id: "3",
name: "Brack.ch",
description: "Wir akzeptieren folgende Kryptowährungen",
currencies: [
{coin: "Litecoin"},
{coin: "Dogecoin"},
{coin: "XRP"},
],
link: "Onlineshop besuchen",
},
];
const uniqueCoins = [... new Set(data.map(item => item.currencies.map(subItem => subItem.coin))
.reduce((arr1, arr2) => arr1.concat(arr2), []))];
console.log(uniqueCoins);
首先使用 map
, and flatMap
组合来自所有 currencies
数组的所有 coin
值,将扁平数组添加到 Set 以删除元素,然后将 Set 展开输出到数组中。
const data=[{id:"1",name:"Digitec",description:"Wir akzeptieren folgende Kryptowährungen",currencies:[{coin:"Bitcoin"},{coin:"Ethereum"},{coin:"XRP"}],link:"webseite besuchen"},{id:"2",name:"Galaxus",description:"Wir akzeptieren folgende Kryptowährungen",currencies:[{coin:"Bitcoin"},{coin:"Monero"},{coin:"XRP"}],link:"webseite besuchen"},{id:"3",name:"Brack.ch",description:"Wir akzeptieren folgende Kryptowährungen",currencies:[{coin:"Litecoin"},{coin:"Dogecoin"},{coin:"XRP"}],link:"Onlineshop besuchen"}];
// Get a new array of coins for each object, and then
// flatten all of them into one array
const coins = data.flatMap(obj => {
return obj.currencies.map(currency => currency.coin);
});
// Create a set from the coins array
const set = new Set(coins);
// `sort and `map` over the array to produce
// an array of HTML for each option
const options = [...set].sort().map(option => {
return `<option value=${option}>${option}</option>`;
});
// Add those options to a select
const select = `
<select>
<option disabled selected>Choose a coin</option>
<option disabled>----</option>
${options.join('')}
</select>
`
// Add that HTML to a container
document.body.insertAdjacentHTML('beforeend', select);
其他文档
使用.flatMap()
方法获取硬币sub-arrays并展平数组,然后使用new Set()
获取唯一值。
const data = [{id: "1",name: "Digitec",description: "Wir akzeptieren folgende Kryptowährungen",currencies: [{coin: "Bitcoin"},{coin: "Ethereum"},{coin: "XRP"}],link: "webseite besuchen"},{id: "2",name: "Galaxus",description: "Wir akzeptieren folgende Kryptowährungen",currencies: [{coin: "Bitcoin"},{coin: "Monero"},{coin: "XRP"}],link: "webseite besuchen"},{id: "3",name: "Brack.ch",description: "Wir akzeptieren folgende Kryptowährungen",currencies: [{coin: "Litecoin"},{coin: "Dogecoin"},{coin: "XRP"}],link: "Onlineshop besuchen"}];
const coins = [ ...new Set(
data.flatMap(({currencies}) => currencies.map(({coin}) => coin)))
];
console.log( coins );
您可以减少数组,然后删除重复项:
const uniqueCoins = [...new Set(data.reduce((prev, cur) => prev.concat(cur.currencies.map(cur => cur.coin)), []))]
分解:
第 1 步: 使用 array.reduce
获取数组中的所有硬币
const coins = data.reduce((prev, cur) => prev.concat(cur.currencies.map(cur => cur.coin)), []);
第 2 步:删除数组中的所有唯一值
const uniqueCoins = [...new Set(coins)];
尝试用所有独特的硬币制作一个 select 过滤器,但没有正确地结束。
当遍历数据时,我可以得到一个所有硬币的列表。
const uniqueCoins = data.map((item) => {
item.currencies.map((subItem) =>
console.log(subItem))
});
我还想使用 Set 方法和扩展运算符来获取唯一值,但我不确定如何组合所有这些。
const data = [
{
id: "1",
name: "Digitec",
description: "Wir akzeptieren folgende Kryptowährungen",
currencies: [
{coin: "Bitcoin"},
{coin: "Ethereum"},
{coin: "XRP"},
],
link: "webseite besuchen",
},
{
id: "2",
name: "Galaxus",
description: "Wir akzeptieren folgende Kryptowährungen",
currencies: [
{coin: "Bitcoin"},
{coin: "Monero"},
{coin: "XRP"},
],
link: "webseite besuchen",
},
{
id: "3",
name: "Brack.ch",
description: "Wir akzeptieren folgende Kryptowährungen",
currencies: [
{coin: "Litecoin"},
{coin: "Dogecoin"},
{coin: "XRP"},
],
link: "Onlineshop besuchen",
},
];
const data = [
{
id: "1",
name: "Digitec",
description: "Wir akzeptieren folgende Kryptowährungen",
currencies: [
{coin: "Bitcoin"},
{coin: "Ethereum"},
{coin: "XRP"},
],
link: "webseite besuchen",
},
{
id: "2",
name: "Galaxus",
description: "Wir akzeptieren folgende Kryptowährungen",
currencies: [
{coin: "Bitcoin"},
{coin: "Monero"},
{coin: "XRP"},
],
link: "webseite besuchen",
},
{
id: "3",
name: "Brack.ch",
description: "Wir akzeptieren folgende Kryptowährungen",
currencies: [
{coin: "Litecoin"},
{coin: "Dogecoin"},
{coin: "XRP"},
],
link: "Onlineshop besuchen",
},
];
const uniqueCoins = [... new Set(data.map(item => item.currencies.map(subItem => subItem.coin))
.reduce((arr1, arr2) => arr1.concat(arr2), []))];
console.log(uniqueCoins);
首先使用 map
, and flatMap
组合来自所有 currencies
数组的所有 coin
值,将扁平数组添加到 Set 以删除元素,然后将 Set 展开输出到数组中。
const data=[{id:"1",name:"Digitec",description:"Wir akzeptieren folgende Kryptowährungen",currencies:[{coin:"Bitcoin"},{coin:"Ethereum"},{coin:"XRP"}],link:"webseite besuchen"},{id:"2",name:"Galaxus",description:"Wir akzeptieren folgende Kryptowährungen",currencies:[{coin:"Bitcoin"},{coin:"Monero"},{coin:"XRP"}],link:"webseite besuchen"},{id:"3",name:"Brack.ch",description:"Wir akzeptieren folgende Kryptowährungen",currencies:[{coin:"Litecoin"},{coin:"Dogecoin"},{coin:"XRP"}],link:"Onlineshop besuchen"}];
// Get a new array of coins for each object, and then
// flatten all of them into one array
const coins = data.flatMap(obj => {
return obj.currencies.map(currency => currency.coin);
});
// Create a set from the coins array
const set = new Set(coins);
// `sort and `map` over the array to produce
// an array of HTML for each option
const options = [...set].sort().map(option => {
return `<option value=${option}>${option}</option>`;
});
// Add those options to a select
const select = `
<select>
<option disabled selected>Choose a coin</option>
<option disabled>----</option>
${options.join('')}
</select>
`
// Add that HTML to a container
document.body.insertAdjacentHTML('beforeend', select);
其他文档
使用.flatMap()
方法获取硬币sub-arrays并展平数组,然后使用new Set()
获取唯一值。
const data = [{id: "1",name: "Digitec",description: "Wir akzeptieren folgende Kryptowährungen",currencies: [{coin: "Bitcoin"},{coin: "Ethereum"},{coin: "XRP"}],link: "webseite besuchen"},{id: "2",name: "Galaxus",description: "Wir akzeptieren folgende Kryptowährungen",currencies: [{coin: "Bitcoin"},{coin: "Monero"},{coin: "XRP"}],link: "webseite besuchen"},{id: "3",name: "Brack.ch",description: "Wir akzeptieren folgende Kryptowährungen",currencies: [{coin: "Litecoin"},{coin: "Dogecoin"},{coin: "XRP"}],link: "Onlineshop besuchen"}];
const coins = [ ...new Set(
data.flatMap(({currencies}) => currencies.map(({coin}) => coin)))
];
console.log( coins );
您可以减少数组,然后删除重复项:
const uniqueCoins = [...new Set(data.reduce((prev, cur) => prev.concat(cur.currencies.map(cur => cur.coin)), []))]
分解:
第 1 步: 使用 array.reduce
获取数组中的所有硬币const coins = data.reduce((prev, cur) => prev.concat(cur.currencies.map(cur => cur.coin)), []);
第 2 步:删除数组中的所有唯一值
const uniqueCoins = [...new Set(coins)];