Iterate through nested array of object in an Array of objects

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

Answer

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