【React備忘録】APIの取得データをジャンルごとに整形する

APIで取得したデータの整形方法について覚え書き。
取得したデータを単純に整形するだけなら容易だけど、各データが持っているジャンルごとに分ける時、「？？」となったので備忘録として残しておく。

例えば、施設などを検索したとき、ジャンル別に取得したデータを表示したいとする。

＜主な仕様＞
・ジャンルは、ジャンルごとにコードが割り振られている。
・取得した各施設のデータには、「施設名」「ジャンルコード」が入っている。
・検索すると「ジャンル名」の下に該当する施設がリストで並ぶ。

全文ではないけれど、ざっくりとコードは以下の通り。

// poiResult ... APIの取得結果が入っている
// genre_code ... 各施設のジャンルコード

// ジャンルコードとジャンル名の定数
const POI_GENRES = [
  {'01': '交通'},
  {'02': 'ガソリンスタンド'},
  {'03': '公共'},
]

const PoiSearch = () => {
    const poiList = POI_GENRES.map(() => {
        const genreCode = Object.keys(genre)[0] // ジャンルコードを取得
        const genreName = Object.values(genre)[0] // ジャンル名を取得
    
        const filterdPois = poiResult.filter((item) => {
            return item.genre_code === genreCode // ジャンルコードが同じ施設を抽出
        })
    
        return {
            genreCode,
            genreName,
            pois: filterdPois,
        }
    })
    
    return (
        <div>
            {poiList.map((item, index) => (
                item.pois.length > 0 && (
                    <div key='index'>
                        ＜{item.genreName}＞
                    </div>
                    {item.pois.map((poi, index) => (
                        <div key='index'>
                            {poi.name}
                        </div>
                    ))}
                )
            ))}
        </div>
    )
}

export default PoiSearchPanel

最終的に整形されたデータ（poiListの返却値）は以下のようになる。

[
    {
        genreCode: '01', 
        genreName: '交通', 
        pois: [
            { name: '東京駅' },
            { name: '東京バスステーション' },
        ]
    },
    {
        genreCode: '02', 
        genreName: 'ガソリンスタンド', 
        pois: []
    },
    {
        genreCode: '03', 
        genreName: '公共', 
        pois: [
            { name: '東京都庁' },
        ]
    },
]

表示結果は以下のようになる。
ガソリンスタンドは取得結果が０件だったので表示されない（item.pois.length > 0）。

＜交通＞
東京駅
東京バスステーション

＜公共＞
東京都庁

ポイントとしては、取得したデータを各ジャンルごとにグルーピングすること。

① map()メソッドを使って、定数に設定された配列の各要素に処理を実行。
② ジャンルコードとジャンル名を取得する。
③ filter()メソッドを使って、ジャンルコードが同じ施設を抽出した配列を作成。
④ 最終的に、各ジャンルごとに「ジャンルコード」「ジャンル名」「施設（配列）」の入った配列が返される。

配列の処理をガンガン使うので覚えておく。