javascript - 从序列化为 JSON 的 Django 对象中提取值的问题

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}}

有人可以告诉我我去了哪里吗？我想使用 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>

视图.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)

标签： javascriptdjangoserialization