Pythonで作成したJSONファイルをJavascriptで読み込んで表示します

Pythonで作成したJSONファイルをJavascriptで読み込んで、HTML側で表示します。

Pythonで作成したJSONファイルをJavascriptでも読み込めるのか気になったので、実際に試してみました。

目次

・PythonでJSONファイルを作成して表示するプログラム

・JSONファイルをメモ帳で開いて中身を確認

・JavascriptでJSONファイルを読みこんで表示

PythonでJSONファイルを作成して表示するプログラム

8~10行目はjson_fフォルダjs_py.jsonが存在しないので、新規でJSONファイルを作成してから書き込んでいます。

13~15行目はJSONファイルを読み込んで、取り出したデータを変数j_showに格納しています。

18、19行目は取り出したデータを表示しています。下の画像がprint文で表示した様子です。

print文で表示した様子

JSONファイルをメモ帳で開いている様子

1つの画像だと見づらいので、分割した画像がこちら↓

日本語で入力した箇所は文字化けみたいになっていますが、PythonやJavascriptのプログラムで開くと日本語で表示されます。

このJSONファイルをHTMLやJavascriptを実行するフォルダに移動します。

JavascriptでJSONファイルを読み込んで表示

HTML側で表示するプログラム

JavascriptでJSONファイルを読み込むプログラム

プログラム名 j01.js

表示した様子



エラーなくPythonで作成したJSONファイルJavascript側で読み込ませて表示することができました。




この投稿以外にPythonとJSONを使った投稿がこちら↓

Pythonで文字列になったJSONデータを辞書型にする方法

JSONファイルにデータを追加するPythonプログラムを紹介します