[JavaScript]fetch関数で取得したJSONデータが実際の返り値の形と異なる

実現したいこと

Next.jsを使ってローカルで自作アプリを作っています。
サーバーサイド言語とフロントを別々にして作っていて、fetch関数でサーバーからのデータを取得していますが、fetch関数とjson関数でJSON化した後の、配列内のオブジェクトの中身が実際の中身と異なっています。

発生している問題・分からないこと

先述のとおり、fetch関数でサーバーからのデータを取得してjson関数でJSON化した後の、配列内のオブジェクトの中身が実際の中身と異なっています。

サーバー言語のデバックで取得したJSONと
フロント側でfetch関数＆json関数で取得したJSON
内の配列内のオブジェクトの数が異なります。

より詳しい情報はソースコードを後述します。
（keyなどの文字列は変えています。）

該当のソースコード

//サーバー言語のデバックで取得したJSON
[
  {
    class: [
      {
        name: "class1",
        grade: "XX",
      },
      {
        name: "class2",
        grade: "XX",
      },
    ],
  },
  {
    user: [
      {
        name: "XXXX",
        age: "XX",
        grade: "XX",
      },
      {
        name: "XXXXXXXXXX",
        age: "XX",
        grade: "XX",
      },
    ],
  },
]

//フロント側でfetch関数＆json関数で取得したJSON
[
  {
    class: [
      {
        name: "class1",
        grade: "XX",
      },
      {
        name: "class2",
        grade: "XX",
      },
    ],
  },
  {
    user: [
      {
        name: "XXXX",
        age: "XX",
        grade: "XX",
      },
      //配列内のオブジェクト内の数が一つしかない
    ],
  },
]

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

バックエンドのソースコードを確認してみましたが先述した戻り値と変わらずでした。

補足

Next.js（Ver14）

int32_t

2024/09/17 11:02

JSONデータだけ見ても原因がわからないので、JSONを生成しているコードとJSONをパーズしているコード、内容の確認のためにしたことを具体的に書いてください。

行動規範の内容に同意します

回答3件

自己解決

一番最初にfetchで取得してきたデータがキャッシュされ、何度も再利用されていることが原因だったようで、以下のようにfetch関数にcache: 'no-store' をつけたら解決しました。

//修正前
  const res = await fetch(`http://127.0.0.1:3000/XXXXXX`);
  const result = await res.json();

//修正後
  const res = await fetch(`http://127.0.0.1:3000/XXXXXX`, {
    cache: 'no-store',
  });
  const result = await res.json();

投稿2024/09/18 05:05

shoco

総合スコア170

まずはJSONについての理解が不足しているので、「jSONとは何なのか」から学び直しましょう。

それはそれとして、
まずは、fetchで得た文字列をそのまま確認しましょう。
つまり、json()でなくtext()でそのままの文字列を取得して表示しましょう。
それがサーバーから送られてきた文字列です。サーバー側で「こういう文字列を送っているはずだ」という物と異なる場合は、「こういう文字列を送っているはずだ」という推測が間違っていたと言うことです（もしくは途中で書き換わっている）。

さらに、