在Javascript中映射和減少對象數組中的數組

Question

我對以下任何建議表示感謝。 我需要從下面的對象數組中的數組中提取關鍵字，並減少它們以顯示所有關鍵字而不重復。

我的數據 JSON對象如下：

[
  {
    "word":"Cat",
    "answer":"A type of feline",
    "keywords": ["pet", "mouse-catcher"]
  },
  {
    "word":"Dog",
    "answer":"A type of canine",
    "keywords": ["pet", "cat-catcher"]
  },
]

我的JS代碼如下：

let keywordList = data.map(entry => {

  let list = [...entry.keywords];
    return (
      list.reduce(( finalArray, current ) => finalArray.concat(current),[])
  );
});

在我的React組件中，我再次使用map迭代數組：

<p>
  keywords: {keywordList.map((word, index) => {
    return (
      <span key={word+index}>
        <a onClick={this.searchKeyword} href="#" id={word}>{word}</a>
        <span> | </span>
      </span>
    );

  })}
</p>

不幸的是，我的reduce函數似乎沒有工作，我得到一個數組數組。 任何建議都會很棒。

Answer 1

let data = [{
    "word": "Cat",
    "answer": "A type of feline",
    "keywords": ["pet", "mouse-catcher"]
  }, {
    "word": "Dog",
    "answer": "A type of canine",
    "keywords": ["pet", "cat-catcher"]
  }
]

let keywords = [...new Set(data.reduce((a, e) => a.concat(e.keywords), []))]

的jsfiddle

Answer 2

使用filter reduce map而不是map ：

var list = data.reduce((p, c) => {
  return p.concat(c.keywords.filter(el => !p.includes(el)));
}, []);

DEMO

Answer 3

const arr = [
  {
    "word":"Cat",
    "answer":"A type of feline",
    "keywords": ["pet", "mouse-catcher"]
  },
  {
    "word":"Dog",
    "answer":"A type of canine",
    "keywords": ["pet", "cat-catcher"]
  },
]

const keywords = [ ...arr.reduce((keywords,obj)=> [...keywords, ...obj.keywords ], [] )
                  .reduce((set,keyword)=> set.add(keyword), new Set() ) ]

第一個reduce通過串聯合並所有關鍵字並重復，第二個reduce將數組轉換為Set刪除所有重復。 最后，我用結果集包裝它
[...設置]將其轉換為數組。

JS Bin