如何將查詢集從 django 傳遞到 javascript function？

Question

我想通過模板將查詢集從視圖傳遞到 javascript function：

我的view.py ：

def myview(request):    
    lista=Mymodel.objects.filter(tipo=mytipo)
    context_dict['lista']=lista
    return render(request, 'mytemplate.html', context_dict)

我的template.html ：

  <script>
  <!--
    window.onpageshow = function() {
      myfunction('{{lista}}');
    };
  -->
  </script>

我的javascript.js ：

function myfunction(lista) {
  for (i=0; i<lista.length; i++) {
              console.log(lista[i].name)
  }
}

問題是lista變成了一個字符串。 我嘗試使用 JSONEncoder，但不確定如何使用。 我想避免使用 JsonResponse，因為我想將該視圖用於我的模板（如果可能）。

編輯：

答案中提出的解決方案有問題：

TypeError: Python object is not JSON serializable

並且此鏈接中提出的解決方案也不起作用（找不到_meta屬性調用的model_to_dict ）。

JSON.parse 不起作用

SyntaxError: missing ) after argument list

問題似乎在一條路徑和另一條路徑之間：

myfunction(JSON.parse('['/mypath/myimage.png', '/otherpath/otherimage.png', 'etc... ']'));

同樣在模板中，您必須添加|safe 。

幸運的是我需要一個字符串列表，所以：

我的view.py ：

def myview(request):    
    lista=Mymodel.objects.filter(tipo=mytipo)
    lista_formatted=[]
    for elem in lista:
        lista_formatted.append('/media/'+str(elem.myfield))
    lista_formatted=json.dumps(lista_formatted)
    context_dict['lista']=lista_formatted
    return render(request, 'mytemplate.html', context_dict)

我的template.html ：

  <script>
  <!--
    window.onpageshow = function() {
      myfunction({{lista|safe}});
    };
  -->
  </script>

Answer 1

更改下面的行

context_dict['lista']=json.dumps(lista) //note json.dumps() wraps it

刪除此處的引號：

<script>
     <!--
    window.onpageshow = function() {
      myfunction({{lista}});//<--quote removed!
    };
-->
</script>

Answer 2

您需要首先將查詢集作為代表實例的字典列表傳遞給模板。 為了在views.py中這樣做：

def myview(request):    
    lista = Mymodel.objects.filter(tipo=mytipo)
    context_dict['lista'] = list(lista.values())
    # Also you can instead also pass the needed parameters to 'values' function, like this:
    # context_dict['lista'] = list(lista.values('field1', 'field3'))
    return render(request, 'mytemplate.html', context_dict)

然后需要在模板中定義一個js變量，將lista的值傳給它。 所以在mytemplate.html文件中：

<script>
    window.onpageshow = function() {
      myfunction({{ lista|safe }});  <!-- Don't forget to use 'safe' templatetag! -->
    };
</script>

這樣你就不需要使用任何第三方 package。