JSONデータをparseしたものをログに表示させるとエラーが発生する

Question

前提・実現したいこと

書籍apiから検索結果を取得する。
検索単語を入力してボタンを押すと、コンソールログに検索結果のオブジェクトが表示される。

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

SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at IncomingMessage.<anonymous> 

該当のソースコード

'use strict'

const express = require('express');
const https = require("https");
const bodyParser = require("body-parser");

const app = express();

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/public/index.html")
});

app.post("/", function(req, res) {
  const query = req.body.searchWord;
  const url = `https://www.googleapis.com/books/v1/volumes?q=${query}`

  https.get(url, function(response) {
    console.log(response.statusCode);

    response.on("data", function(data) {
      const result = JSON.parse(data || "null");
      console.log(result);
    })
  })
})

app.listen(3000, function() {
  console.log("Server is running.");
}); 

試したこと

ステータスコードを表示させると200が返ってくるのでデータ自体は取得できているはずなのですが、JSON.parseの部分で問題が生じているようです。

JSON.parse(data || "null")と書き換えても解決しませんでした。

分かる方いらっしゃいましたらよろしくお願いいたします。

Answer 1

JSON.parse(data || "null")と書き換えても解決しませんでした

ご質問のコード内の仮引数 data は JSON全体ではなく、通信の過程で受け取るJSONの一部分になります。
（chunk:チャンクと命名する人もいます）

---

HTTPS モジュールは HTTPモジュールに似た実装なので、公式ドキュメント Http#get()の「JSON fetching example:」として示されるサンプルコードを参考にしてください。

サンプルコードから読み取れるのは、

1. （受け取るJSONデータのサイズが大きいときは特に、一度に全体を受信できないので）JSONを分割して少しずつ受け取る実装になっている。 data イベントが複数回発火して、受け取った一部分がコールバック関数に渡される。
2. 全ての受信を終えると end イベントが発火し、rawData に構築されたJSONデータを利用できる。

※ dataイベント用のコールバック関数と、endイベント用のコールバック関数の両方から参照できるスコープ上にrawDataが宣言されています。

追記）

ステータスコードを表示させると200が返ってくるのでデータ自体は取得できているはずなのですが

厳密には違います。

HTTP通信におけるデータは「HTTPヘッダ＋空行＋HTTPボディ」となります。
HTTPヘッダは受け取ったが、HTTPボディは読み込み中の状態と考えます。

Comments

[maskmelon]

いつも分かりやすい回答をありがとうございます。JSONデータの一部をオブジェクトに変換しようとしていたことが原因だったのですね。公式ドキュメントを参考に、rawDataにchunkを付け加えていき、endイベントが発火したところでparseするとうまくいきました。