取得

同一URLでデータを取得するようにする。さっきこのURLはPOSTメソッドだと投稿ができるようにしてたけど、今度はGETメソッドでJSONを取得できるようにする。そんでその取得したデータをもとに、投稿をページに表示すれば良いはず。

お品書き

GET /nodebbs/msg
JavascriptでAPIを叩きレスポンスをページに反映する

GET /nodebbs/msg

log.jsonファイルを読み込んでJSON文字列形式に変換しレスポンスを返す。

const obj = JSON.parse('[' + fs.readFileSync('log.json', 'utf8') + ']')

log.jsonはちゃんとしたJSON形式ではないのでそのまま読み込もうとするとエラーが出る。なので配列を表す[]をつけてJSON.parseに流してあげる。

File system | Node.js v20.8.0 Documentation

JSON.parse() - JavaScript | MDN

JSON.parse() メソッドは文字列を JSON として解析し、文字列によって記述されている JavaScript の値やオブジェクトを構築します。任意の reviver 関数で、生成されたオブジェクトが返される前に変換を実行することができます。

expressにはJSON形式で返すというメソッドがあったのでそれを使う

 res.json(obj)

Express 4.x - API リファレンス

とりあえず全部返すようにした。全部返すなら一旦オブジェクトに変換せんでもlog.jsonに[]つけた文字列そのまま返せばいーじゃんとも思ったけど、後で範囲指定とかできたらしたいなと思ったのでこうした。ここまでやると

https://dalomo.net/nodebbs/msg

にアクセスするとJSONが返ってくる。ただこれexpress5.x系だと削除されるメソッドらしい。

JavascriptでAPIを叩きレスポンスをページに反映する

ゼロからはじめるJavaScript(8) ブラウザのFetch APIで天気情報を取得してみよう

2005年に廃れかけていたJavaScriptに輝きを与え、その後のJavaScript興隆のきっかけになったのがAjax(エイジャックス)と呼ばれる技術です。これは、ブラウザから非同期処理を利用して外部データを取得する技術で、今ではいろいろな場面で一般的に利用されている技術です。

こちらを参考に

    <script>
        fetch('https://dalomo.net/nodebbs/msg')
            .then(res => res.json())
            .then(data => contents(data));

        function contents(data) {
            let s = ''
            for (let row of data) {
                s += `
                    <p>${row['msg']}</p>
                    <p>名前:${row['name']} 日時: ${row['dt']}</p>
                    <hr>
                    `
            }
            var contents = document.getElementById('contents')
            contents.innerHTML = s
        }
    </script>

fetchでAPIにアクセス。res.json()でレスポンスをJSON形式に。そのデータをcontents関数に渡して内容を作る。

for分でオブジェクトそれぞれのデータをHTMLにしてく。${ }というのがプレースホルダーとして使えるらしい。初めて知った。