遍歷物件陣列中的嵌套物件陣列

試圖用所有獨特的硬幣制作一個選擇過濾器，但沒有正確地完成它。

當回圈資料時，我可以得到一個像這樣的所有硬幣的串列。

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

uj5u.com熱心網友回復：

首先使用, 和組合所有陣列中的所有coin值，將該扁平陣列添加到 Set 以對元素進行重復資料洗掉，然后將 Set 展開回陣列中。currenciesmapflatMap

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

附加檔案

• 模板/字串文字

• insertAdjacentHTML

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

使用.flatMap()方法獲取硬幣子陣列并展平然后陣列，然后使用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 );

標籤：javascript 数组 javascript 对象

上一篇：在Angular8模型中創建陣列內部陣列的問題

下一篇：將每個WebSocket訊息附加到div-VUE3