【JavaScript】記事一覧から「指定カテゴリのいずれかを含む」で絞り込む方法

2023/1/17

カテゴリデータを持つ記事一覧を、指定カテゴリ（リスト）の中のどれかを含む記事で絞り込みたいという場合の処理の方法メモです。

カテゴリデータが⑴連想配列のリストの場合と⑵リストの場合、⑶カンマ区切りの文字列の場合の3つのパターンを紹介していきます。

記事一覧データ1（カテゴリが連想配列のリストの場合）
- 取得したいカテゴリのリストで絞り込み
記事一覧データ2（カテゴリがリストの場合）
- 取得したいカテゴリのリストで絞り込み
記事一覧データ3（カテゴリがカンマ区切りの文字列の場合）
- 取得したいカテゴリのリストで絞り込み

記事一覧データ1（カテゴリが連想配列のリストの場合）

const articles = [
	{
		title: "記事1",
		content: "記事1の内容",
		categories: [
			{name: "カテゴリ1", description: "カテゴリ1についての説明"},
		]
	},
	{
		title: "記事2",
		content: "記事2の内容",
		categories: [
			{name: "カテゴリ2", description: "カテゴリ2についての説明"},
			{name: "カテゴリ4", description: "カテゴリ4についての説明"},
		]
	},
	{
		title: "記事3",
		content: "記事3の内容",
		categories: [
			{name: "カテゴリ1", description: "カテゴリ1についての説明"},
			{name: "カテゴリ3", description: "カテゴリ3についての説明"}
		]
	}
];

categoriesにカテゴリデータの連想配列のリストが指定されている。

取得したいカテゴリのリストで絞り込み

"カテゴリ1"と"カテゴリ3"を持つデータを取得したい。

const categories = ["カテゴリ1", "カテゴリ3"];

const filteredArticles = articles.filter(article => 
		article.categories.some(c => categories.includes(c.name))
);

console.log(filteredArticles

// [
// 		{ title: '記事1', content: '記事1の内容', categories: [ [Object] ] },
// 		{ title: '記事3', content: '記事3の内容', categories: [ [Object], [Object] ] } 
// ]

記事一覧データ2（カテゴリがリストの場合）

const articles = [
	{
		title: "記事1",
		content: "記事1の内容",
		categories: ["カテゴリ1"]
	},
	{
		title: "記事2",
		content: "記事2の内容",
		categories: ["カテゴリ2", "カテゴリ4"]
	},
	{
		title: "記事3",
		content: "記事3の内容",
		categories: ["カテゴリ1", "カテゴリ3"]
	}
];

categoriesにカテゴリデータの配列（リスト）が指定されている。

取得したいカテゴリのリストで絞り込み

"カテゴリ1"と"カテゴリ3"を持つデータを取得したい。

const categories = ["カテゴリ1", "カテゴリ3"];

const filteredArticles = articles.filter(article =>
		article.categories.some(c => categories.includes(c))
);

console.log(filteredArticles

// [
// 		{ title: '記事1', content: '記事1の内容', categories: [ [Object] ] },
// 		{ title: '記事3', content: '記事3の内容', categories: [ [Object], [Object] ] } 
// ]

記事一覧データ3（カテゴリがカンマ区切りの文字列の場合）

const articles = [
	{
		title: "記事1",
		content: "記事1の内容",
		categories: "カテゴリ1"
	},
	{
		title: "記事2",
		content: "記事2の内容",
		categories: "カテゴリ2, カテゴリ4"
	},
	{
		title: "記事3",
		content: "記事3の内容",
		categories: "カテゴリ1, カテゴリ3"
	}
];

caterogiesに「複数のカテゴリ名がカンマ区切り」で指定されている。

取得したいカテゴリのリストで絞り込み

"カテゴリ1"と"カテゴリ3"を持つデータを取得したい。

const categories = ["カテゴリ1", "カテゴリ3"];

const filteredArticles = articles.filter(article =>
		categories.some(c => article.categories.split(',').map(s => s.trim()).includes(c))
);

console.log(filteredArticles

// [
// 		{ title: '記事1', content: '記事1の内容', categories: [ [Object] ] },
// 		{ title: '記事3', content: '記事3の内容', categories: [ [Object], [Object] ] } 
// ]

Javascript