二つの連想配列を比較し、共通するvalueがある配列だけを摘出したいです。

前提

配列操作の勉強をしています。

実現したいこと

該当のソースコード


const Array = [
{
pageId: '1',
tags: ['food', 'drink']
}
{
pageId: '2',
tags: ['weather', 'nature']
}
{
pageId: '3',
tags: ['house', 'building', 'shop']
}
{
pageId: '4',
tags: ['food', 'all']
}
 
]

const Tag = [
{
tags: 'food',
name: '食べ物'
}
{
tags: 'animal',
name: '動物'
}
{
tags: 'car',
name: '車'
}

]

例えば上記のような二つの連想配列があったときに、
この二つを比較し、下記のように返ってきて欲しいです。
（配列Arrayに複数あるtagsのうち、一つでも配列Tagのtagsに含まれるものがあれば取得したいです。）

{
pageId: '1',
tags: ['food', 'drink']
}
pageId: '4',
tags: ['food', 'all']
}

試したこと

下記のようにやってみたのですが、Arrayにtagが複数設定されているからか、希望の挙動をしませんでした。

const filtered = Array.filter((x) => Tag.includes(x.tags))

補足情報（FW/ツールのバージョンなど）

よろしくお願い致します。
説明がわかりにくくすみません。。。
どなたかお力添えいただけませんでしょうか？
よろしくお願い致します。

yambejp

2022/12/01 08:30

ヒットしないものも含めてもう少しサンプルを増やしてください

行動規範の内容に同意します

回答1件

ベストアンサー

質問されているコードを回答する前に、

変数 Array は標準の組み込みオブジェクトとしてのArrayと名前が被るので、data にします。
変数 Tag も小文字始まりにします。配列なので複数形が望ましいですが、tags だと dataの要素のプロパティにも tagsがあるので、 tagNames とします。
tagNames の要素のプロパティ tags の値は単一の文字列なのでsを取って tagにします。

といった修正をすることをお勧めします。そうすると下記のようになります。

javascript
1const data = [
2  { pageId: '1', tags: ['food', 'drink'] },
3  { pageId: '2', tags: ['weather', 'nature'] },
4  { pageId: '3', tags: ['house', 'building', 'shop'] },
5  { pageId: '4', tags: ['food', 'all'] }
6];
7
8const tagNames = [
9  { tag: 'food', name: '食べ物' },
10  { tag: 'animal', name: '動物' },
11  { tag: 'car', name: '車' },
12];

上記に対して求められている filtered を得るにはたとえば以下です。

javascript
1const tagsSet = new Set(tagNames.map(({ tag }) => tag));
2
3const filtered = data.filter(({ tags }) => tags.some(tag => tagsSet.has(tag)));