Convert django/python dict via json to javascript dict

Question

I am trying to convert a python dict to a Javascript dict. As far as I understood I have to convert the python dict to Json, which I can convert to a Javascript Object

view.py

jsonheaderdict = json.dumps ( headerdict)

{{jsonheaderdict}} in template results in

 {"F 1": ["BBBB", "AAAAA"], "F 2": ["ASDASD"], "F 3": ["QWEQWE"]}

and my js looks like this

$(".dict").click(function () {
  alert("first alert");
  var result = JSON.parse(jsonheaderdict);
  alert(result);
});

The first alert shows, the second one doesn't. What am i missing? Already tried var result = jQuery.parseJSON(jsonheaderdict); which didnt work either. I searched for similar question but didnt find any soultion that worked for me.

EDIT For a better understanding how jsonheaderdict is created in my view:

headerdict = dict()
for d in projectdescriptors:                     #list of objects called descriptors
    dp = projectprojections.filter(descriptor=d) #list of objects connected to descriptors 
    parray = []
    for p in dp:
        parray.append(p.name)
    headerdict[d.name] = parray

do you want to alert all three entries ? what should the second alert show ? — Taki
– Taki, Commented Jun 5, 2018 at 15:25
The alert is just verify that the conversion works. Ultimately I wnat to use the dict to create a tableheader with 2 rows, where the dict:key column has the same lenght as all the corresponding dict:value columns together. — Rubick
– Rubick, Commented Jun 5, 2018 at 15:28

hygull · Accepted Answer · 2018-06-06 11:11:27Z

1

@Rubik, I may guess, alert() takes a string as parameter and you're passing it an object in second call to alert().

JSON.parse() creates an object from the string representation of any object (array, set etc.).

Please try to change your JS code as follows (just modify 2 lines):

Please comment if it doesn't work, I will update my answer to help you.

$(".dict").click(function () {
  alert("first alert");
  // var result = JSON.parse(jsonheaderdict);
  alert(JSON.stringify(jsonheaderdict));
});

» Try below sample code for verification.

var jsonheaderdict = {"F 1": ["BBBB", "AAAAA"], "F 2": ["ASDASD"], "F 3": ["QWEQWE"]};

console.log(jsonheaderdict); 

alert(jsonheaderdict)

alert(JSON.stringify(jsonheaderdict))

edited Jun 6, 2018 at 11:11

answered Jun 5, 2018 at 17:39

hygull

8,7282 gold badges47 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

kunambi Over a year ago

Instead of alert, he/she should use console.log instead.

hygull Over a year ago

Correct, that's also okay, so in this case, he/she can display object on browser's console. console.log() takes any kind of objects as parameter.

Rubick Over a year ago

alert("{{jsonheaderdict}}"); results in an alert saying {{jsonheaderdict}}. consol.log(jsonheaderdict) results in

{F 1: Array(2), F 2: Array(1), F 3: Array(1), asd: Array(1)} F 1 : (2) ["BBBB", "AAAAA"] F 2 : ["ASDASD"] F 3 : ["QWEQWE"] asd : ["111"] __proto__ : Object

hygull Over a year ago

@Rubik, try alert(JSON.stringify(jsonheaderdict)); and let me know if it works. It should work according to the result of console.log(jsonheaderdict).

Rubick Over a year ago

It shows [object Object]. I managed to make everything work using a dictionariy and a list. It is different than i thought it would work but its actualy quite nice. Still, thanks for your effort.

|

Quentin · Accepted Answer · 2018-06-05 16:29:19Z

0

It is important to recognize that you are not passing a value from Python to JavaScript, you are writing JavaScript source code using Python.

This…

jsonheaderdict = {"F 1": ["BBBB", "AAAAA"], "F 2": ["ASDASD"], "F 3": ["QWEQWE"]}

… is the JavaScript syntax to assign an object (created with an object literal) to jsonheaderdict.

It isn't JSON. It isn't a string. It makes no sense to put it anywhere near JSON.parse.

Just use the object directly.

Further reading: There's no such thing as a "JSON Object"

edited Jun 5, 2018 at 16:29

answered Jun 5, 2018 at 15:40

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

4 Comments

Rubick Over a year ago

I get the "Theres no such thinkg as a JSON Object" part, but I'm not sure about this not beeing a a Json str, since this says json.dumps(obj,[...]): Serialize obj to a JSON formatted str[...].

Quentin Over a year ago

@Rubick — And at that moment it is a string of JSON. Then you write it into JavaScript source code and it stops being a string and it stops being JSON.

Rubick Over a year ago

Okay. But as far as I understood JSON.parse is the attempt to create a JS dictionary from the given JSON?

Quentin Over a year ago

From a string of JSON which, as I have pointed out twice already, jsonheaderdict is not. (And the term is "object" not "dictionary")

Collectives™ on Stack Overflow

Convert django/python dict via json to javascript dict

2 Answers 2

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related