pythonからHTML/javascriptにjsonデータを送信したい。

Question

前提・実現したいこと

djangoでwebアプリを作ろうとしており、色々調べたのですがよく分からなかったので
質問させていただきます。
pythonのviews.pyで画像一覧のjsonデータを作ることは出来たのですが、
そのデータがHTML/javascriptに送れません。
プログラミングの分かる人が周りに1人もおらず、困り果てておりますので、
何卒よろしくお願い致します。

該当のソースコード

#views.py
import glob
import os

def file_load(request):
    files = glob.glob("/media/image/A/*.JPG")

    lists = []
    dic = {}
    i = 1
    for file in files:
        dic["key_"+str(i)] = os.path.basename(file)
        lists.append(dic)
        i += 1

    # JSON形式へ変換
    li = json.dumps(dic,ensure_ascii=False, indent=4)
    #return(li)
    return render(request,'/map/index.html',context=li)

views.pyの出力結果

{
    "key_1": "A_0001.JPG",
    "key_3": "A_0002.JPG",
    "key_4": "A_0003.JPG",
    "key_5": "A_0004.JPG",
}

ファイル名は表示されず、空欄や{ だけになってしまう。

index.html
<script type="text/javascript">
    var area = "{{ li|safe }}";
    document.write('<h4>{{li.0}}</h4>');
    document.write('<h4>{{li.1}}</h4>');
    document.write('<h4>{{li.2}}</h4>');
    document.write('<h4>{{li.3}}</h4>');
</script>

画像は増えていくので、今後はループでA_0001.JPG～が表示できるようにしたい。

Answer 1

contextは辞書型で渡す必要があります。

views.pyの

return render(request,'/map/index.html',context=li)

を

return render(request,'/map/index.html',context={'url_list':li})

にして、index.htmlの

var area = "{{ li|safe }}";

を

var area = "{{ url_list |safe }}";

にするとどうでしょうか？

Comments

[yamatar]

ご回答ありがとうございます。
url_listで実行しましたが、何も表示されませんでした。
何か根本的な間違いがあるのでしょうか？

[llr114]

url_listで実行、とはどのような状態でしょうか？
python manage.py runserverでサーバーを立ち上げて、ブラウザで表示させる等あると思いますが、いかがでしょうか？
また、index.htmlに<p>test</p>などを追加した場合、その文字は表示されるのでしょうか？
確認をお願いします。

[yamatar]

python manage.py runserverで実行しました。
ブラウザにindex.htmlで記述したタイトル名や地図などは表示されていますが、ファイル名だけが出力されていません。
なぜか、def file_loadをdef indexに変えて HTMLをdocument.write('<h4>'+area+'</h4>');にすると｛｝だけ表示されます。li.0…のままだと何も表示されない。
def file_loadのままdocument.write('<h4>'+area+'</h4>');だと、
何も表示されません。
urls.pyの修正も必要？
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include(router.urls)),
path('accounts/', include('django.contrib.auth.urls')),
path('', index, name='map_index'),
path('map/geojson/', GeojsonView.as_view(), name='geojson_view'),
]

[llr114]

urls.pyに追記が必要だと思います。
表示させたいURLはなんでしょうか？

今だと
path('', index, name='map_index'),
となっているので、ホームにアクセスした際に、関数index()を呼ぶようになっています。
def indexだと挙動が変わるのはそのためです。

「document.write('<h4>'+area+'</h4>');にすると｛｝だけ表示されます。」
これに関しては、
また、<h4>{{li.0}}</h4>の件ですが、views.pyの
dic["key_"+str(i)] = os.path.basename(file)
で値が取れていない可能性があります。
上記のコードの下に
print(os.path.basename(file))
を設置するなりして、本当に取得できているのか確認してください。

また、
<h4>{{li.0}}</h4>
とありますが、liの横の0はキーでしょうか？
views.pyでdic["key_"+str(i)]としているので、やるならばkey_0とかだと思うのですが、いかがでしょうか？

[yamatar]

表示させたいURLはなんでしょうか？：
ホームにアクセスしたときに表示したいです。
path('', file_load, name='map_index2')だと何も表示されませんでした。

print(os.path.basename(file))
を設置するなりして、本当に取得できているのか確認してください。：
どうやらfiles = glob.glob("/media/image/A/*.JPG")で取得できていないようです。とりあえずglob.glob("C:/Users/～/media/image/A/*.JPG")とすると取得できました。(pycharmのターミナルで確認。)
from django.conf import settingsして
(settings.BASE_DIR+"/media/~)とすると別のエラーが…
しかし、ブラウザでは表示されておらず、microsoft edgeのdevtoolに”Invalid or unexpected token”のエラーがでています。
<script type="text/javascript">
var area = "{ 　←"{の部分に赤下線があり×マークもある。
"key_1": "A_0001.JPG",
…
"key_5": "A_0005.JPG",
}";
jsondumpが上手くできていないという事でしょうか？

<h4>{{li.0}}</h4>：
0番目、1番目を指定したつもりでした。
ファイル名の読み込みでエラーが出ているため、key_0の結果は確認できていません。

[llr114]

devtoolに”Invalid or unexpected token”のエラーがでています。
→var area = "{{ li|safe }}";のタイミングでエラーが出るということでしょうか？

そもそもliにデータがあるのか確認するために、
views.pyの
# JSON形式へ変換
li = json.dumps(dic,ensure_ascii=False, indent=4)
次にprint(li)で中身がちゃんとあるかみてみてください。

その次、htmlの
var area = "{{ li|safe }}";
の前にconsole.log("{{ li|safe }}")
を設置して中身が入っているか、エラーが起きないか確認してみてください。

[yamatar]

var area = "{{ li|safe }}";のタイミングでエラーがでています。

print(li)は取得できています。
出力結果；
{
"key_1": "A_0001.JPG",

"key_5": "A_0005.JPG",
}

console.log("{{ li|safe }}")では上記(print(li)と同じ)の中身は入っていますが、エラーがでています。
エラー；
Uncaught SyntaxError: Invalid or unexpected token
console.log("{ 　← "{ を指してエラー発生
"key_1": "A_0001.JPG",
…
print(li)出力時には｛の前に"なかったです。

[llr114]

var area = JSON.parse('{{li | safe}}');
こちらでどうでしょうか？

[yamatar]

今まさにJSON.parseを試していたところです！
var area = JSON.parse("{\u000A \u0022key_1\u0022: \u0022A_0001.JPG/…とdevtoolの表示は変ですが、
document.write('<h4>'+area.key_1+'</h4>');
とするとブラウザに表示されました。
※document.write('<h4>{{key_1}}</h4>');ではダメなようです。

[llr114]

※document.write('<h4>{{key_1}}</h4>')
についてですが、key_1はただのキーで変数ではないので、それだけ記述しても何も表示されません。
これで解決したでしょうか？

[yamatar]

大変勉強になりました。
ありがとうございました。