UndefinedError:list对象没有元素Undefined

时间:2014-03-12 12:29:12

标签: javascript d3.js flask jinja2

运行我的应用程序时出现此错误,我不知道问题是什么..

这是我的HTML代码:

<select name="sel" onChange="myGraphFunction(this.value)">
{% for abs in absolute %}
<option value="{{abs.id|safe}}">{{abs.imp}}</option>
{% endfor %}
</select>

其中absolute是一个字典数组,如

[{'id': 1, 'imp': someName, 'd': [{'key': someKey, 'y': someValue},{'key': .., 'y': ..},...]}, {'id': 2, 'imp': .., 'd': [{...}]}, ...]

这是我的javascript代码,其中我得到了select的值,所以我可以加载一些数据:

function myGraphFunction(dd){
var testdata = {{absolute[dd].d|safe}}

nv.addGraph(function() {

var width = 500,
    height = 500;

var chart = nv.models.pieChart()
    .x(function(d) { return d.key })
    //.labelThreshold(.08)
    //.showLabels(false)
    .color(d3.scale.category10().range())
    .width(width)
    .height(height)
    .donut(true)
.labelType("percent");

chart.pie
    .startAngle(function(d) { return d.startAngle -Math.PI/2 })
    .endAngle(function(d) { return d.endAngle -Math.PI/2 });

  //chart.pie.donutLabelsOutside(true).donut(true);

  d3.select("#test2")
      //.datum(historicalBarChart)
      .datum(testdata)
    .transition().duration(1200)
      .attr('width', width)
      .attr('height', height)
      .call(chart);
nv.utils.windowResize(chart.update);
return chart;
});

当我尝试在testdata中加载绝对[dd] .d时出现问题。

我尝试了这个:

if(typeof dd === 'undefined'){
var testdata = {{absolute[0].d|safe}}
}else{
var testdata = {{absolute[dd].d|safe}}
}

但是我得到了同样的错误......

1 个答案:

答案 0 :(得分:1)

dd是一个Javascript名称,但在呈现模板时未设置 dd是Jinja2 Undefined对象,渲染失败。

您需要在函数外部设置testdata列表,然后在函数内部引用它:

var absolute = {{absolute|tojson|safe}}
function myGraphFunction(dd){
    var testdata = absolute[dd].d

我使用tojson过滤器确保absolute正确转换为有效的JavaScript文字。