Проблема с извлечением значения из объекта Django, сериализованного как JSON

Question

Я сериализовал объект Django, используя

data = serializers.serialize("json", vchemicals)

, и передал его в свой шаблон, где он может быть напечатан как:

[{"model": "vbench.vchemical", "pk": 1, "fields": {"shortname": "NaCl", "longname": "Sodium Chloride", "catno": null, "batchno": 1, "owner": 1}}, 
{"model": "vbench.vchemical", "pk": 2, "fields": {"shortname": "NH4SO4", "longname": "Ammonium Sulphate", "catno": null, "batchno": 1, "owner": 1}}, 
{"model": "vbench.vchemical", "pk": 3, "fields": {"shortname": "Glucose", "longname": "D-Glucose", "catno": null, "batchno": 1, "owner": 1}}, 
{"model": "vbench.vchemical", "pk": 4, "fields": {"shortname": "NaPO4", "longname": "Sodium Phosphate", "catno": null, "batchno": 1, "owner": 1}}, 
{"model": "vbench.vchemical", "pk": 5, "fields": {"shortname": "Glycerol", "longname": "Glycerol", "catno": null, "batchno": 1, "owner": 1}}, 
{"model": "vbench.vchemical", "pk": 6, "fields": {"shortname": "KCl", "longname": "Potassium Chloride", "catno": null, "batchno": 1, "owner": 1}}, 
{"model": "vbench.vchemical", "pk": 7, "fields": {"shortname": null, "longname": "Tryptone", "catno": null, "batchno": 1, "owner": 1}}, 
{"model": "vbench.vchemical", "pk": 8, "fields": {"shortname": "Test", "longname": "Name that is clearly too long for the table", "catno": null, "batchno": 1, "owner": 1}}]

Я установил это как переменную JS в скрипте, используя

var chemlist = "{{ data }}";

Теперь он печатается как

[{"model": "vbench.vchemical", "pk": 1, "fields": {"shortname": "NaCl", "longname": "Sodium Chloride", "catno": null, "batchno": 1, "owner": 1}}, {"model": "vbench.vchemical", "pk": 2, "fields": {"shortname": "NH4SO4", "longname": "Ammonium Sulphate", "catno": null, "batchno": 1, "owner": 1}}, {"model": "vbench.vchemical", "pk": 3, "fields": {"shortname": "Glucose", "longname": "D-Glucose", "catno": null, "batchno": 1, "owner": 1}}, {"model": "vbench.vchemical", "pk": 4, "fields": {"shortname": "NaPO4", "longname": "Sodium Phosphate", "catno": null, "batchno": 1, "owner": 1}}, {"model": "vbench.vchemical", "pk": 5, "fields": {"shortname": "Glycerol", "longname": "Glycerol", "catno": null, "batchno": 1, "owner": 1}}, {"model": "vbench.vchemical", "pk": 6, "fields": {"shortname": "KCl", "longname": "Potassium Chloride", "catno": null, "batchno": 1, "owner": 1}}, {"model": "vbench.vchemical", "pk": 7, "fields": {"shortname": null, "longname": "Tryptone", "catno": null, "batchno": 1, "owner": 1}}, {"model": "vbench.vchemical", "pk": 8, "fields": {"shortname": "Test", "longname": "Name that is clearly too long for the table", "catno": null, "batchno": 1, "owner": 1}}]

и когда я пытаюсь сослаться на первый элемент, используя

chemlist[0] 

Я получаю

[

вместо того, что хочу, а именно:

{"model": "vbench.vchemical", "pk": 1, "fields": {"shortname": "NaCl", "longname": "Sodium Chloride", "catno": null, "batchno": 1, "owner": 1}}

Кто-нибудь может сказать мне, куда я пошел? Я хочу получить доступ к значениям полей (короткое имя, длинное имя и т. Д. c.), Используя значения pk в качестве ключа.

редактировать: AJAX / jQuery, используемый для решения этой проблемы, добавлен

Код шаблона:

    <script>
    var acc = document.getElementsByClassName("chemicalrow");
    var i;

    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
        var theid = this.id;
        var data = {theid};
        console.log(data)
        $.ajax({
          type : 'GET',
          url :  "{% url 'get_chemical_data' %}",
          data : data,
          success : function(response){
            document.getElementById("snamebox").value=response.chem_info.sname
            document.getElementById("lnamebox").value=response.chem_info.lname
            document.getElementById("catnobox").value=response.chem_info.catno
            document.getElementById("batchnobox").value=response.chem_info.batchno
          },
          error : function(response){
            console.log(response)
          }
        })
       })
    }
    </script>

views.py

def getChemicalData(request):
    if request.method == "GET" and request.is_ajax():
        theid = request.GET.get("theid")

        try:
            chemical = vChemical.objects.get(id = theid)
        except:
            return JsonResponse({"success":False}, status=400)
        chem_info = {
            "sname": chemical.shortname,
            "lname": chemical.longname,
            "catno": chemical.catno,
            "batchno": chemical.batchno,
        }
        return JsonResponse({"chem_info":chem_info}, status=200)
    return JsonResponse({"success":False}, status=400)