PHPの配列データを JSON に吐き出して JavaScript に受け渡す方法

Contents

暑い日々が続いております
ソースコード
JSON として読み込めない原因
まとめ

暑い日々が続いております

毎日暑い日々が続いておりますが、仕事柄日中はお昼の休憩以外は外に出ることがないので運動不足が半端ないです。

最近職場近くに格安のジムがオープンしたので、近々契約しようかな〜と。

さてさて、今回はPHPの配列データを JSON に吐き出して JavaScript に受け渡す方法について。

単純にPHPのデータをJavaScriptに渡す…ってのは以前も記事を書いたことがあるんですが…

JSON に変換してからJavaScriptに渡す…ってのはやったことがなく、詰まったのでメモ立てらまとめてみとうかと。

前回ブログはこちらから↓

ソースコード

以下のような、配列の中に連想配列があるようなデータを想定します。

// 配列を定義
$data = [
  [
    'name' => 'こじろう',
    'class' => 'ひよこ',
    'weight' => 8,
  ],
  [
    'name' => 'りんか',
    'class' => 'うさぎ',
    'weight' => 12,
  ],
  [
    'name' => 'たくや',
    'class' => 'りす',
    'weight' => 10,
  ],
];

// 値を JSON 形式に変換
$jsonData = json_encode($data, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE);
// 指定ファイルに書き出す
file_put_contents("./hogehoge/fugafuga.json" , $jsonData);   // ファイルのパスを指定

こうすると、こんな感じの JSON ファイルが生成されます。

[
	{
		"name": "こじろう",
		"class": "ひよこ",
		"weight": 8
	},
	{
		"name": "りんか",
		"class": "うさぎ",
		"weight": 12
	},
	{
		"name": "たくや",
		"class": "りす",
		"weight": 10
	}
]

JSON_PRETTY_PRINT を引数に指定すると、上記のように見やすく整形してくれるので良い。JSON_UNESCAPED_UNICODE も合わせて指定してマルチバイト Unicode 文字をそのまま表示できるようにします。

あとは JavaScript で fetch で取ってきます。

fetch('./hige/hogege.json')  // JSON ファイルのパスを指定
.then(response => {
  // JSON として解釈できるように変換
  return response.json();
})
.then(data => {
  data.forEach((v) => {
     console.log(v.name);  //  こじろう  りんか  たくや
  });
})
.catch(error => {
  console.log(error);
}):

そうすると、JSON データが配列のように扱えるので、forEach を使ってわちゃわちゃやるだけ。

JSON として読み込めない原因

JavaScript で JSON として読み込めない原因はだいたいこんな感じ。

[] で囲まれていない

{
	"name": "こじろう",
	"class": "ひよこ",
	"weight": 8
},
{
	"name": "りんか",
	"class": "うさぎ",
	"weight": 12
},
{
	"name": "たくや",
	"class": "りす",
	"weight": 10
}

JSONデータの一番外側が、[] で囲われていない。

カンマで区切られていない

{
	"name": "こじろう",
	"class": "ひよこ",
	"weight": 8
}   ← カンマがない
{
	"name": "りんか",
	"class": "うさぎ",
	"weight": 12
}    ← カンマがない
{
	"name": "たくや",
	"class": "りす",
	"weight": 10
}

配列と配列の間が、カンマ(,)で区切られていない

最後尾にカンマがついている

[
	{
		"name": "こじろう",
		"class": "ひよこ",
		"weight": 8
	},
	{
		"name": "りんか",
		"class": "うさぎ",
		"weight": 12
	},
	{
		"name": "たくや",
		"class": "りす",
		"weight": 10
	},  ← カンマがある
]

JSONの最後の{}の後ろはカンマをつけてはいけない

JSON とは？と思ったらこちらをご参考まで。