javascript - 从 PostgreSQL JSONField 到 Django 模板中的 JSON 对象

Question

我正在尝试将 JSON 对象从 Django PostgreSQL 数据库发送到 Django 模板。这是我的 models.py

# models.py
from __future__ import unicode_literals

from django.contrib.postgres.fields import JSONField

from django.db import models

class Net(models.Model):
    net_name = models.CharField(max_length=200)

    def net_default():
        return {"net_name": "None", "graph_data": "None", "city_data": "None"}

    data = JSONField(default=net_default())

    def __unicode__(self):
        return self.net_name

这是我的views.py

# standard includes
from django.shortcuts import render

# my includes
from django.http import HttpResponse
from django.template import loader

# get nets
from .models import Net

def index(request):
    net_q_set = Net.objects.order_by('net_name')
    context = {
        'nets': net_q_set,
    }
    return render(request, 'viewer/index.html', context)

所以我有一个边栏，用户可以在其中从“nets”JSON 对象中选择一个网络。然后采用所选网络名称的 javascript 函数应遍历 JSON 对象以获取网络节点并获取每个节点的纬度和经度。我可以使用以下代码遍历名称(此代码有效并生成我想要的内容):

{% for name in nets %}
    <li><a href="javascript:plotMap('{{name}}');">{{name}}</a></li>
{% endfor %}

但我在 javascript 脚本中建立 JSON 对象时遇到了问题。我试过:

<script>
    var nets = JSON.parse({{ nets }})
    function plotMap(name){ ... };
</script>

但我在 var nets 行收到“unexpected token &”错误。我猜这是来自解析 JSON 对象。有一个更好的方法吗？还是我犯了一个我看不到的错误？

Edit -- 2 使用@Arpit 的解决方案，我调用

{% for name in nets %}
    <li><a href='javascript:plotMap({{name.data}});'>{{name}}</a></li>
{% endfor %}

然后在 plotMap(net_json) 函数中，我立即调用 alert(net_json.city_data.Perth1.lat); 根据我的理解，这应该会发出一个显示“-31.93333”，但我收到错误“未捕获的语法错误:意外的字符串”。单击上面的调试器链接会显示:

plotMap({u'city_data': {u'Alice,Springs': {u'lat': -23.7, u'long': 133.88333}, ...}, u'graph_data': { u'nodes': [u'Perth1', ...], u'links': [[u'Perth1', u'Adelaide1'], ...]'});

Answer 1

您的上下文不是 jsonfield 属性，它是一个 queryset。您正试图在您的 javascript 函数中提供一个对象 name 而不是提供一个 jsonfield 数据属性。

在您现有的代码中，如果您引用数据属性，那么它应该可以工作。

{% for name in nets %}
    <li><a href="javascript:plotMap('{{name.data|safe}}');">{{name}}</a></li>
{% endfor %}

如果你只想要 jsonfield 值那么你可以这样做

net_q_set = Net.objects.order_by('net_name').values('data')

编辑:您可以使用一种方法对 json 进行字符串化，这样使用起来会容易得多。

class Net(models.Model):
    net_name = models.CharField(max_length=200)

    def net_default():
        return {"net_name": "None", "graph_data": "None", "city_data": "None"}

    data = JSONField(default=net_default())

    @property
    def get_json_data(self):
        return json.dumps(self.data)

    def __unicode__(self):
        return self.net_name

然后在模板中。

<li><a href="javascript:plotMap({{name.get_json_data}});">{{name}}</a></li>