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

私はコンポーネントに反応の中で、私は再びマップを使用して、配列を反復処理：

<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

代わりのmap、filterとreduce：

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

DEMO

Answer 2

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 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()) ] 

最初マーを減らします連結によってすべてのキーワードを繰り返します.2番目のreduceは、配列をSetに変換してすべての複製を削除します。最後に、結果セットを
[...]にラップして配列に変換します。

JS Bin