Django / Pythonのデータ配列をJavaScriptで出力させる

Question

前提・実現したいこと

Pythonで、以下のようなデータを入手しました。
（追記；youtube_transcript_api を使うと、text, time, durationの値が得られるのですが、そこのtextのみを取り出し、
text_dic = dict(zip(range(len(text)), text))
という形で辞書としています。それを簡略化し、見やすくしたものが{0: ---- }となります。）
''　と　””　の両方含まれています。

text_dic = {0: 'Why', 1: 'the same', 2: 'the storyline', 3: "When the final"} 

context ={
        'texts': text_dic
    }

return render(request, 'search/index.html', context)

これをHTML側に渡しています。
JavaScript内で、これらのデータを以下のようにして読み込んでみました。

 var test = "{{ texts }}";
 document.write(test[0]);

HTMLに表示されたものは、｛　だけであり、一文字一文字認識されている状況です。実際はWhy と表示させたいです。

''、もしくは””内の文字をまとめて出力するにはどうすればよいでしょうか？

Comments

[m.ts10806]

>以下のようなデータを入手しました
どこからでしょうか。背景や前提は必ず具体的に記載してください。

[progra]

youtube_transcript_api を使うと、text, time, durationの値が得られるのですが、そこのtextのみを取り出し、
text_dic = dict(zip(range(len(text)), text))
という形で辞書としています。それを簡略化し、見やすくしたものが{0: ---- }となります。

[m.ts10806]

質問は編集できますので

Answer 1

「JSONのような文字列」になっているだけなので、当然、文字列に対しての処理になります。
「オブジェクト」として扱いたいのでしたらパースしてください。

JSON.parse()

ただ、VIEWのテンプレートエンジンの多くは出力時にHTMLのエスケープを入れるので、
そのままパースできるかどうかはまた別の話です。
JavaScriptに直接値を突っ込むより、AjaxなどでdataType:jsonとして通信して情報を受け渡ししたほうが確実かと思います。

Comments

[progra]

ありがとうございます。var test = JSON.parse({{ texts }});
のようにJavascript内でやってみたことはありますが、できなかったんですよね。

[m.ts10806]

書いてないことは分かりませんし、「できない」だけではどういう結果になったか（エラーがでたかとか）も記載されないとその後のアドバイスができません。
ただ、そこも加味した回答の後半になっています。最後まで読んでください。
結局はブラウザに出力された情報が、きちんとパース出来る（JavaScriptがJSONとして解釈できる）文字列かどうかです。ブラウザの「ソースを表示」から確認できます。

[progra]

ブラウザに出力されなかったということです。Ajaxもやってみます！

[m.ts10806]

ですから、書いてないことは誰にも分かりません。
質問者だけが持っている情報が多ければ多いほど、後出しとなり、的確なアドバイスを得られなくなります。
「それもう読んだ」「それもう調べた」　って言われても「書いてないから知らん」です。
ブラウザに本当に何もでなかったのであれば、そもそもデータの受け渡しを間違えてるということなので、それこそ、フレームワークのドキュメントから基本的な部分をおさえるしかないのではないでしょうか。
それに、JavaScriptに直接値を渡すことをよしとしていないフレームワークもありますし、
普通に値を渡すだけだとエラーにするようなフレームワークもあります。
必要な手続きを踏んでいるか、ドキュメントをきちんと確認してください。

[progra]

teratailの投稿も初めてなもので、すいません。アドバイスありがとうございます。

[m.ts10806]

質問は編集できますので 　適宜追記してください。
コメントも全て最初から表示されるわけではないので、質問本文にないと同じようなことを何度も書かなければならない羽目になります。