从 Django 视图获取 JavaScript 数组答案

【问题标题】：Get JavaScript array from Django view从 Django 视图获取 JavaScript 数组
【发布时间】：2015-05-09 11:52:20
【问题描述】：

我将 Django 与 Google Charts API 一起使用。我需要构建一个 JavaScript 数组来呈现一个条形图，显示在给定日期创建的对象数。

打印到模板的预期数组应如下所示：

  ...

  function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
      ['Date', '# of records'],
      ['2015-03-07', 3],    // Expected format:  ['Date', # of objects]
      ['2015-03-08', 8],
    ]);

  ...

views.py：

class LogsView(TemplateView):
    template_name = 'logs.html'


    def ValuesQuerySetToDict(self, vqs):
        return [ [item['date_created'], item['created_count'] ] for item in vqs]

    def render_chart_data(self, **kwargs):
        queryset = LogEntry.objects.filter(user=self.request.user).extra(
            {'date_created': 'date(created)'}
            ).values('date_created').annotate(created_count=Count('id'))
        modified_dict = self.ValuesQuerySetToDict(queryset)

        return json.dumps(modified_dict)


     def get_context_data(self, **kwargs):
        context = super(
            LogsView, self
        ).get_context_data(**kwargs)

        context['chart_data'] = self.render_chart_data()

以下内容呈现到我的 django 模板（我暂时绕过将其发送到 JavaScript 以查看返回的内容...

当我认为我需要返回如下 JavaScript 数组时：

["2015-02-18", 3],
["2015-02-19", 12],
["2015-02-21", 1],

并将其提供给将呈现条形图的 drawStuff 函数。

替代方法

我按照 StackOverflow 上的 this thread 修改了 render_chart_data 以使用 django 序列化程序 like this 但我收到错误消息：“'dict' object has no attribute '_meta'

【问题讨论】：

您确定queryset、converted 或json_data 包含您的预期值吗？
@JosephtheDreamer - 我更新了，现在确认查询集数据正在通过 Django 视图返回。
modified_dict 怎么样？您能否使用这些值更新您的帖子，以便我们都可以检查 json.dumps 是否实际上提供了正确的值？
@JosephtheDreamer - 很抱歉造成混淆，这里是所有相关的 views.py 代码：gist.github.com/joefusaro/4b6b400e45941e80220e
@JosephtheDreamer - 感谢您对此提供帮助，我能够解决该问题，现在将条形图数据呈现为 javascript 和 HTML。您对我的解决方案的任何反馈将不胜感激。谢谢！

标签： javascript arrays json django

【解决方案1】：

在您的查询集中，将 created_count 呈现为字符串，而不是整数。 Json 对整数表现不佳。
在您的 JS 函数 drawStuff 中，chart_data 应该被解析为 json。见下文：

 var json_string = '{{chart_data}}';
 var json = JSON.parse(json_string);
 var data = new google.visualization.arrayToDataTable(json)

【讨论】：

【解决方案2】：

感谢所有为此提供帮助的人。

有两件事需要改变； ValuesQuerySetToDict 函数需要改写如下：

def ValuesQuerySetToDict(self, vqs):
    list_vals = [ ['Date', '# of records'] ]
    for item in vqs:
        list_vals.append(
            # convert datetime object to string otherwise JSON serialization error
            [ str(item['date_created']), item['created_count'] ]
            )

    return list_vals

而render_chart_data函数需要改写如下：

def render_chart_data(self, **kwargs):
    queryset = LogEntry.objects.filter(user=self.request.user).extra(
        {'date_created': 'date(created)'}
        ).values('date_created').annotate(created_count=Count('id')).order_by('created-date')
    modified_list = list(self.ValuesQuerySetToDict(queryset))
    json_data = json.dumps(modified_list)

    return json_data

最后，需要将 {{ chart_data }} 传递给 drawStuff 函数，如下所示：

  function drawStuff() {
    var data = new google.visualization.arrayToDataTable(
        {{ chart_data|safe }}
        );

我已经发布了 views.py 和 logs.html here。

【讨论】：