filterとincludeを使用して配列を正しく扱う
2022年1月26日
配列の使い方としてメモ
要件
全てのカテゴリーを返すAPIがあったとします。
例:
エンドポイント: /categories
レスポンス
[
{
"id": 1,
"name": "サンプルカテゴリー"
}
]
そして新規でカテゴリーidの配列で特定のカテゴリーだけをgetしたいとする。
下記がイメージ
async function getAllCategories(): Promise<Category[]> // 元からあるAPI
async function getCategories(targetCategoryIds): Promise<Category[]> // 新規に欲しいAPI
普通であれば元のカテゴリーのAPIにカテゴリーIDでのフィルタリングを入れれば終了です。
ただ今回は工数の都合上バックエンドに新規のAPIを拒否された場合を想定します笑(実際にあった)
対処法
まーこーなってしまった以上フロントエンド側で対処するしかないです、、、
結論filterしてincludesで絞り込む
// 1 既存APIでカテゴリー一覧をgetする
// 2 getしたカテゴリーをdataに代入する
data.filter((category: Category) => targetCategoriesIDs.includes(category.ID));
これで完了。
targetCategoriesIDsは引数からとってくることを仮定しています。