Estoy trabajando en Django, donde envío un diccionario de Python a un archivo HTML.
En ese archivo HTML, quiero acceder al diccionario de Python y agregar las claves y los valores del diccionario en las matrices de Javascript. Puedo acceder al diccionario de Python en HTML, pero no puedo hacer lo mismo en Javascript.
Así es como puedo acceder a los valores de Diccionario en HTML,
{% for key, image in predictedLabel.items %} <tr> <th scope="row">{{ key }}</th> <td>{{ image }}</td> </tr> {%endfor%}El script Javascript que tengo es un gráfico circular, que se muestra a continuación,
<script> var xArray = []; var yArray = []; var xArray = ["Italy", "France", "Spain", "USA", "Argentina"]; var yArray = [55, 49, 44, 24, 15]; var layout = { title: "Distribution of Labels" }; var data = [{ labels: xArray, values: yArray, hole: .5, type: "pie" }]; Plotly.newPlot("myPlot", data, layout); </script>Quiero poner la clave del diccionario de Python en el xArray y los valores del diccionario en el yArray. Para eso, necesito acceder al diccionario de Python en el script de Javascript, pero no sé cómo acceder a los valores de Python en el script de Javascript. ¿Alguien puede ayudarme en este sentido?
Puede pasar el diccionario en formato JSON al cliente. Esto se hace comúnmente así:
import json # ... send to client json = json.dumps(dict_name)Luego en tu plantilla:
<script type="application/json">{{ json }}</script>Luego, en tu JavaScript puedes simplemente hacer:
const data = JSON.parse(document.querySelector('script[type="application/json"]')); // do something with 'data'