Pass Django list as argument to Javascript-CodePudding

I have a list passed through the context into the html page of a Django project which I want to read inside of a .js which contains chartjs code. The problem is that .js is reading as string and not as a list/array.

views.py

def index(request):
    context = {
        "data": [1, 2, 3, 4, 5]}
    return render(request, 'index.html', context)

Then, in the html page I have to pass the {{ data|safe }} to a javascript like so:

<script src='{% static "js/chart.js/linechart.js" %}'
   var label = "fakelabel";
   var index = {{ data|safe }};
></script>

Inside the .js I'm reading the 'index' input as:

document.currentScript.getAttribute("index")

How can I fix this? ('label' is read correctly as str indeed).

CodePudding user response：

You can use ajax to fetch list or dict data from views and you need to add jQuery cdn in html file.

from django.http import JsonResponse
def indexAjax(request):
   context={"data":[1,2,3,4,5]}
   return JsonResponse(context,safe=False)

Inside your js file or script tag

function fun(){
   $.ajax({
      url:"{% url'indexAjax" %},
      dataType:'json',
      type:'GET',
      success:function(res){
           console.log(res.data)
           //here you can write your chartjs
           }
    })}

CodePudding user response：

{{ data|safe }} is not a safe way to output a Python object as JavaScript.

Use json_script if you want to be safe

This is how to do it

<script>
   var index = {{ data|json_script:'mydata' }};
<script>

Then you can use the index variable into another scrip like this:

  <script>
    const data = JSON.parse(document.getElementById('mydata').textContent);
  </script>