UndefinedError: list object has no element Undefined

Question

I have this error when I run my app and I don't know what the problem is..

Here is my html code:

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

where absolute is an array of dictionaries like

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

Here is my javascript code where I get the value of the select so I can load some data:

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

The problem comes when I try to load absolute[dd].d in testdata.

I tried this instead:

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

but I'm getting the same error...

Answer 1

dd is a Javascript name, but it is not set when rendering your template. dd is then the Jinja2 Undefined object and your rendering fails.

You'd set the testdata list outside of your function, then refer to it inside the function:

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

I used the tojson filter to ensure that absolute is properly turned into a valid JavaScript literal.