Want to pass json array as django variable inside javascript

Question

I have a json array and I want to pass this inside a javascript variable, inside the django template. I am able to access the variable inside django template {{variable}} . But not able to access this inside the javascript.This is my variable:

[
    
    {'Book ID': '1', 'Book Name': 'Challenging Times',
    
     'Category': 'Business', 'Price': '125.60'},
    
    {'Book ID': '2', 'Book Name': 'Learning JavaScript',
    
     'Category': 'Programming', 'Price': '56.00'}
    
]

I have used {{variable|safe}} inside the js but not working. Plz let me know where I am making the mistake.

Use json module of python and it's two methods json.loads() and json.dumps(), and also in JavaScript there a module JSON and it's two methods JSON.parse() and JSON.stringify(), to send and retrieve data in string datatype. — Sunderam Dubey
– Sunderam Dubey, Commented Feb 28, 2022 at 7:29

Iain Shelvington · Accepted Answer · 2022-02-28 07:29:45Z

2

You should use the json_script template filter to add your variable to the template in a format that can be loaded in your JS

{{ variable|json_script:"foo" }}

<script>
    const foo = JSON.parse(document.getElementById('foo').textContent);
</script>

answered Feb 28, 2022 at 7:29

Iain Shelvington

32.5k3 gold badges36 silver badges55 bronze badges

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

4 Comments

Arun Over a year ago

This is not working

Iain Shelvington Over a year ago

@Arun how is it not working, what error/issue are you getting?

Arun Over a year ago

I am not getting any error , the data what I am looking for is shown in the template via the js

Iain Shelvington Over a year ago

@Arun it's not clear what your issue is, if you run console.log(foo) in your broswer's devtools console do you get the data you need?

Collectives™ on Stack Overflow

Want to pass json array as django variable inside javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related