どーも、ぐるたか@guru_takaです。
以下の条件で、フィルタリングする機会があったのでメモします。
- 配列の要素がオブジェクト
- オブジェクト内で、特定のキーの値が、指定する値と一致するものを抽出
- フィルタリング後、別キーの値を返す
具体例
配列
const originDatas =[
{fruits:"りんご",color:"赤"},
{fruits:"ぶどう",color:"紫"},
{fruits:"レモン",color:"黄"},
{fruits:"イチゴ",color:"赤"},
{fruits:"キウイ",color:"緑"},
]
const sortColor = ["赤",”黄”]
//期待したい出力
const answer = ["りんご","レモン","いちご”]
コード
まずはコードを載せます。
originDatas.filter(data => sortColor.includes(data.color)).map(data => data.fruits)
要素分解して解説していきます。
フィルタリング
originDatas.filter(data => sortColor.includes(data.color))
sortColorの色を含むオブジェクトを抽出します。
イメージはこんな感じ！
STEP.1
配列内にある全てのオブジェクトに処理
STEP.2
抽出したオブジェクト
dataに対し、キーcolorの値data.colorを取得STEP.3
includes関数を使い、
sortColor内の要素があれば、trueを返し、抽出最終的にこんなデータが返ってきます。
const returnData =[
{fruits:"りんご",color:"赤"},
{fruits:"レモン",color:"黄"},
{fruits:"イチゴ",color:"赤"},
]
オブジェクトの特定の値を出力
最後にmap関数を使って、キーfruitsのみ返すようにすればOK！
コメントを残す