Pass array of dicts from python to Javascript

Question

I am not able to access an array of dicts passed from python script to javascript. When I use the following code, there is no alert message popping up. What am I doing wrong here?

errors = [1, 2]
graphs = [{'A': 1}, {'B': 2}]
return render(request, 'index.html', {'errors': errors, 'graphs': graphs})

# index.html
<script>
if ({{ graphs }}){
    alert('Detected');
}
if ({{ errors }}){
    alert('Detected');
}
</script>

I even tried converting this to json, but still same problem.

mygraphs = json.dumps(graphs)
return render(request, 'index.html', {'errors': errors, 'graphs': mygraphs})

I am able to access the array fine inside the HTML.

{% for graph in graphs %}
    <li style="color: red;">Element detected</li>
{% endfor %}

prints out Element detected twice. But I am not able to do this inside the script.

try `console.log("{{ graphs }}")` – itzMEonTV Mar 21 '15 at 14:36 — itzMEonTV, Mar 21 '15 at 14:36
Nope, no comment printed to console.. – user828647 Mar 21 '15 at 14:44 — user828647, Mar 21 '15 at 14:44

score 0 · Answer 1 · answered Mar 21 '15 at 14:37

0

Django template replaces single quotes by ' entity. So add the safe filter to the graphs variable:

if ({{ graphs|safe }}){
    alert('Detected');
}

answered Mar 21 '15 at 14:37

catavaran

44,703
8
98
85

I think it produce `undefined` error. `"{{ graphs }}"` should be needed. – itzMEonTV Mar 21 '15 at 14:40
I had already tried this...it did not work. Maybe I should add that even using the `errors` array does not popup the alert – user828647 Mar 21 '15 at 14:41
I tested it right now and it works just fine. The rendered html is: `if ([{'A': 1}, {'B': 2}]) {` – catavaran Mar 21 '15 at 14:49
So did you get the alert message? – user828647 Mar 21 '15 at 14:58
Yes, I got the alert. Just in case I am using firefox. – catavaran Mar 21 '15 at 15:06

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

This should work

if("{{ graphs|safe }}"){
    alert('Detected');
}

Refer this Django Template Variables and Javascript

edited May 23 '17 at 12:12

Community

1
1

answered Mar 21 '15 at 14:44

itzMEonTV

19,851
4
39
49

Sorry, did not work. Also see my edit, I don't think `safe` has anything to do with it, even a simple array `errors` is not detected. – user828647 Mar 21 '15 at 14:54
"safe" is for convert `'` to back only. I just tested here.Did you try without `json.dumps` – itzMEonTV Mar 21 '15 at 14:56

Pass array of dicts from python to Javascript

2 Answers2