Iterate through nested array of object in an Array of objects

Question

Trying to make a select filter with all the unique coins, but not getting to the end of it correctly.

When looping through data I can get a list of all the coins like this.

const uniqueCoins = data.map((item) => {
 item.currencies.map((subItem) => 
 console.log(subItem))
});

I also want to use the Set method and spread operator to get just unique values but I'm not sure how to combine all these.

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",
 },
];

• mhodges: Do you just want an array of the unique coin names like this: ['Bitcoin', 'Monero', 'Dogecoin', ...]?
• tevemadar: Does this answer your question? Get unique values from array of arrays

Answer 1

You can reduce the array and then remove the duplicates:

const uniqueCoins = [...new Set(data.reduce((prev, cur) => prev.concat(cur.currencies.map(cur => cur.coin)), []))]

To break it down :

Step 1 : Get all the coins in an array using array.reduce

const coins = data.reduce((prev, cur) => prev.concat(cur.currencies.map(cur => cur.coin)), []);

Step 2 : Remove all the uniques in the array

const uniqueCoins = [...new Set(coins)];

Answer 2

Start by combining all the coin values from all the currencies arrays using map, and flatMap, add that flattened array to a Set to dedupe the elements, and then spread the Set back out into an array.

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);

Additional documentation

• Template/string literals

• insertAdjacentHTML

• Remo Furrer: thats exactly what i was looking for. How do you combine this into a select dropdown menu?

Answer 3

Use .flatMap() method to get the coins sub-arrays and to flatten then array, then use new Set() to get unique values.

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 );

Answer 4

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);