Pythonで作成したJSONファイルをJavascriptで読み込んで表示します
Pythonで作成したJSONファイルをJavascriptで読み込んで、HTML側で表示します。
Pythonで作成したJSONファイルをJavascriptでも読み込めるのか気になったので、実際に試してみました。
目次
・PythonでJSONファイルを作成して表示するプログラム
・JSONファイルをメモ帳で開いて中身を確認
・JavascriptでJSONファイルを読みこんで表示
PythonでJSONファイルを作成して表示するプログラム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import json id_info=[ {'1001':'一郎','1002':'二郎','1003':'三郎'}, {'1001':[1,11,111],'1002':[2,22,222],'1003':[3,33,33]} ] #JSONファイルに書き込み js_w=open('json_f/js_py.json','w') json.dump(id_info,js_w) js_w.close() #JSONファイルの読み込み js_r=open('json_f/js_py.json','r') j_show=json.load(js_r) js_r.close() #表示 for i in range(len(j_show)): print("["+str(j_show[i]["1001"])+"]"+"["+str(j_show[i]["1002"])+"]"+"["+str(j_show[i]["1003"])+"]") |
８～１０行目はjson_fフォルダにjs_py.jsonが存在しないので、新規でJSONファイルを作成してから書き込んでいます。
１３～１５行目はJSONファイルを読み込んで、取り出したデータを変数j_showに格納しています。
１８、１９行目は取り出したデータを表示しています。下の画像がprint文で表示した様子です。
print文で表示した様子
JSONファイルをメモ帳で開いている様子
1つの画像だと見づらいので、分割した画像がこちら↓
日本語で入力した箇所は文字化けみたいになっていますが、PythonやJavascriptのプログラムで開くと日本語で表示されます。
このJSONファイルをHTMLやJavascriptを実行するフォルダに移動します。
JavascriptでJSONファイルを読み込んで表示
HTML側で表示するプログラム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSON確認</title> <script type="text/javascript" src="j01.js" charset="utf-8"></script> </head> <body> <form> <div id=show></div> </form> </body> </html> |
JavascriptでJSONファイルを読み込むプログラム
プログラム名 j01.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
window.addEventListener('load',window_load,false); function window_load(){ fetch('js_py.json')//JSONファイルの読み込み .then((data) => data.json()) .then((obj) => { var jsonpDisp = document.getElementById('show');//HTMLのdivタグで表示 var str="";//読み込んだデータをstrに足していきます for(var i=0;i<obj.length;i++){ str+="["+obj[i]['1001']+"]"+"["+obj[i]['1002']+"]"+"["+obj[i]['1003']+"]"+"<br>"; } jsonpDisp.innerHTML = str//HTML側で表示 }); } |
表示した様子
エラーなくPythonで作成したJSONファイルをJavascript側で読み込ませて表示することができました。
この投稿以外にPythonとJSONを使った投稿がこちら↓
