0

I am creating a python dictionary and passing it over to javascript.

var students = {{myStudents}}

when generated becomes

var students = [(u'Mark', u'b7'), (u'Phillipe', u'a67'), (u'John', u'a1')]

Now I need to loop over the names (Mark, Philippe, etc...) and populate a dropdown list.

My problem, how can I access the key/value separately. Ultimately I could pass both lists separately, but I want to check if their is another non-bruteforce way.

Syntax_Error
  • 5,964
  • 15
  • 53
  • 73
  • 1
    Why don't you JSON encode your dict? – jsfan Feb 19 '16 at 10:46
  • 2
    What you have also looks like a list of tuples, not like a dict. – jsfan Feb 19 '16 at 10:47
  • @jsfan Could you provide example? no idea why it looks like that! – Syntax_Error Feb 19 '16 at 10:57
  • A dictionary would render as `{u'Mark': u'b7', u'Phillipe': u'a67', u'John': u'a1'}`. However, neither what you have nor that would be valid Javascript because of the unicode markers. Do you want to stick with the list of tuples or make it a dictionary? – jsfan Feb 19 '16 at 11:00
  • There's some useful info about iterating over dictionaries in JavaScript [here](http://stackoverflow.com/q/558981/4014959). In particular, you need to use the `.hasOwnProperty()` method. – PM 2Ring Feb 19 '16 at 11:21

4 Answers4

1

If you really have a dict in myStudents, you could write your template as:

var students = {{% for key, value in myStudents %}{"{{ key }}": "{{ value }}"},{% endfor %}}

which will become

var students = {"Mark": "b7", "Philippe": "a67", ...}

in your HTML source. You can then iterate it in Javascript using the following:

for(var key in students) {
  var value = students[key];
  ...
}
Selcuk
  • 57,004
  • 12
  • 102
  • 110
1

Before passing the variable to Javascript, you want to

import json
json_var = json.dumps(var)

and then pass json_var instead of var to the Javascript.

In Javascript you then iterate over it as

for (k in students) {
}

using k to get the names and students[k] to get the value associated with the name.

If you want to stick with your list of tuples, use the value students[k][0] in the loop for the names and students[k][1] for the second value in the tuple.

jsfan
  • 1,373
  • 9
  • 21
  • json.dumps is giving a pipe.broken error and increased loading time – Syntax_Error Feb 19 '16 at 12:58
  • @Syntax_Error: How large is your dictionary or list? Can you edit your question with some of the relevant Python code? I have JSON encoded pretty large objects before without having any performance trouble. – jsfan Feb 19 '16 at 13:07
  • Around 6000 elements. Name could reach 60 chars and codes are 15 chars... I have simplified them in the question. Selcuk's answer is the best solution I think – Syntax_Error Feb 19 '16 at 13:09
  • 1
    @Syntax_Error: Selcuk's answer is ok as long as you have no double quotes in the strings. Those will break your Javascript. JSON encoding before passing is safer and better style. 6000 elements is definitely no problem and that you get a broken pipe tells me that you're doing something wrong somewhere. However, without seeing the code and context, I wouldn't know what it is. – jsfan Feb 19 '16 at 13:13
0

Like @jsfan pointed out, python dictionary would render as follows: {u'students': {u'Mark': u'b7', u'Phillipe': u'a67', u'John': u'a1'}}. To iterate over the dictionary you use,

  for (x in students) {
    students[x]
 }

But if you wish to get value for a particular key, for example the value for key 'Mark', you use:

for (x in students)
 {
    students[x]['Mark']
}
EZE ARINZE
  • 13
  • 2
0

I tried the answers here and it didn't work for me. I figured out that all I had to do is to parse the JSON data. I thought that sharing this solution might be helpful for others: In the python file:

import json
json_data = json.dumps(your_dict)

pass the json_data to your Javascript file. In your Javascript file:

var keys = JSON.parse(json_data);
for (var key in keys) {

}
Omer
  • 126
  • 1
  • 7