Content-type': 'application/jsonが反映されません(Node.js)。

Question

前提・実現したいこと

jsonファイルを読み込む。

発生している問題・エラーメッセージ

Chromeで127.0.0.1:8000/apiにアクセスしてもjsonファイルを読み込みません。またデベロッパーツールで確認したところ、res.writeHead部分が反映されず、content-typeが設定できていないようです。res.writeHead(200, {'Content-type': 'application/json'}と指定しているのですが。
別の箇所で'Content-type' : 'text/html'と指定しているところ(404)はデベロッパーツールで確認すると、ちゃんと反映されています。
コードにどこか間違いがありますでしょうか。よろしくお願いいたします。

該当のソースコード

const fs = require('fs');
const http = require('http');
const url = require('url');

    const server = http.createServer((req, res) => {

        const pathName = req.url;

        if(pathName === '/'){
            res.end('This is top page');
        }else if(pathName === '/api'){

            fs.readFile(`${__dirname}/data/data.json`, 'utf-8', (err, data)=>{
                const myData = JSON.parse(data);
                res.writeHead(200, {'Content-type': 'application/json'});
                console.log(myData);
                res.end(data);
            });
        }else{
            res.writeHead(404, {
                'Content-type' : 'text/html'
            });
            res.end('<h1>Page not found</h1>');
        }
        res.end('Hello!');
    });

    server.listen(8000, '127.0.0.1', () =>{
        console.log('Listening');
    });

試したこと

console.log(myData)はきちんと動いています。
Chrome、 Firefox, Safariで表示させてもだめでした。
プライベートモードやキャッシュの削除をしても変わりませんでした。

補足情報（FW/ツールのバージョンなど）

Node.js v10.16.0
mac OS Mojave
Google Chrome

Answer 1

この問題の原因はjsの非同期的な動きによるものだと思います。
参考サイト
参考サイト

細かい説明は参考サイトに投げます。

ざっくり説明すると、Node.jsは処理に時間が掛かる動作や関数を後回しにして、他の処理を先に行う性質があります。
つまり、通常であれば上から下へ順番に処理されますが、ときどき順番を無視した処理が行われるのです。

今回の場合ですと、fs.readFile関数が処理に時間がかかる関数です。
この関数内の処理を待っている間に、先に処理を進めてif分の終わりまで行きます。そしてres.end('Hello!');を先に実行してしまうのです。
後からres.end(data);が実行されますが、すでにクライアントへres.end('Hello!');でデータを渡しているため、jsonファイルは表示されません。
これが問題の原因です。

これの解決のためには非同期処理を行えばいいのですが、難解なのでfs.readFileSync関数を使うことをおすすめします。
こちらを使えば、通常の上から下へ順番に処理されます。
fs.readFileSync参考サイト

}else if(pathName === '/api'){
  const data = fs.readFileSync(`${__dirname}/data/data.jsone`, 'utf-8')
  res.writeHead(200, {'Content-type': 'application/json'});
  res.end(data);
}else{

参考になれば幸いです。

Comments

[keite]

丁寧な説明をしていただき、ありがとうございます。
しかしながら、試してみましたが、readFileSyncにしても、jsonファイルは読み込めないままです。

[ttakatech]

私の環境では動作しているので、ファイルパスに原因があるのかな？っと思います。
`${__dirname}/data/data.json`←この部分です。
これをconsole.logで確認して頂けないでしょうか。

また、一応確認したいのですが、目的はjsonファイルをブラウザで表示するということでよろしいでしょうか。

[keite]

練習目的で、ブラウザでjsonファイルが表示させることであっています。

127.0.0.1:8000/apiにアクセスしてみると、console.log(myData)では以下のように表示されます。
```
[ { id: 0,
Name: 'Taro',
from: 'Tokyo',
sex: 'male',
description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non felis feugiat, cursus mi non, vehicula felis. Duis dignissim ipsum ac lorem pulvinar, sit amet gravida augue posuere. ' },
{ id: 1,
Name: 'Hanako',
from: 'Osaka',
sex: 'female',
description:
' In nec arcu vitae ipsum blandit interdum. Donec pellentesque ex leo, nec commodo libero tincidunt id. Proin fringilla laoreet tellus, tempus elementum dolor euismod quis. ' } ]
```

`const data = fs.readFileSync(`${__dirname}/data/data.json`, 'utf-8');`を一番上に持っていく(グローバル変数?)と、ブラウザで表示されました。

[ttakatech]

では、res.end('Hello!');を削除してみてください。

[keite]

すみません、readFileSyncに書き換える際に打ち間違いがあったようです。
res.endを削除しなくても、jsonファイルが表示されました。
お付き合いいただきありがとうございました。

[ttakatech]

解決されたようで何よりです。
かんばってください。