React入門 - Part5 - jsonファイルの読み込み、表示

目次

プロジェクトを作成

Part2を参考にプロジェクトを作成してください。

jsonファイルを用意しよう

プロジェクトフォルダ配下にcode.jsonというファイルを作成しましょう。
中身はjsonなら何でもいいのですが、今回は下記を使用します。

{
    "CD001": {
        "NAME": "りんご",
        "SUPP": "赤い甘いフルーツ"
    },
    "CD002": {
        "NAME": "みかん",
        "SUPP": "オレンジ色のやつ"
    },
    "CD003": {
        "NAME": "桃",
        "SUPP": "白とかピンクのちょっと高級やつ"
    }
}

jsonを読み込んでみる

pages配下にread-json.tsxというファイルを作成します。

import React from 'react';
import Code from '../code.json';

export const ReadJson: React.FC = () =>{

    /** jsonデータ編集 */
    const cdList = [];
    for (var cdNo in Code) {
        for (var cd in Code[cdNo]) {
            const cdStr = <div>
                               {cdNo + '-' + cd + '-' + Code[cdNo][cd]}
                          </div>;
            cdList.push(cdStr);
        }
    }

    /** レンダー部分 */
    return (
        <>{cdList}</>
    );
};

export default ReadJson;

表示してみる

ターミナルでyarn devを実行しhttp://localhost:3000/read-jsonにアクセスします。

以下のような表示になればOKですね。

ちなみに

jsonの何らかの設定をどこかにしたような気がするのだけど、忘れてしましました。
上記試して、エラーになった等の情報教えていただけましたらありがたいです。
(時間を見つけて、真っ新な環境で再度試してみます。)

以上