abeshi blog
カテゴリーで検索

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は引数からとってくることを仮定しています。