Unable to utilize dictionary sent from Django to the template

Question

Unable to utilize dictionary sent from Django to the template

Below is a Python dictionary that I am sending to a template:

mydict = {
    "ABC": {
        "target_weight": 1,
        "target_ra_weight": 2
    },
    "XYZ": {
        "target_weight": 3,
        "target_ra_weight": 4
    },
    "JKL": {
        "target_weight": 5,
        "target_ra_weight": 6
    }
}
return render(request, 'template.html', {'mydict': mydict})

I'm having trouble assigning this data to a JavaScript variable and accessing its content. I've attempted the following in the JavaScript section of my template:

var mydict = {{ mydict }};
> Uncaught SyntaxError: unexpected token {

var mydict = {{ mydict|safe }};
> Uncaught SyntaxError: unexpected token {

var mydict = {{ mydict|escapejs }};
> Uncaught SyntaxError: unexpected token {

The code below allows me to create the variable, but attempting to access it ((e.g., console.log(mydict)) results in an error:

var mydict = JSON.parse('{{ mydict }}');
console.log(mydict);
> Uncaught SyntaxError: unexpected token { in JSON at position 1
// same thing happens when using |safe or |escapejs

javascript json django

Answer 1

Answer №1

To properly handle the data, utilize JSON instead of a dictionary. You can achieve this by employing the json.dumps function:

import json

mydict = {
    "ABC": {
        "target_weight": 1,
        "target_ra_weight": 2
    },
    "XYZ": {
        "target_weight": 3,
        "target_ra_weight": 4
    },
    "JKL": {
        "target_weight": 5,
        "target_ra_weight": 6
    }
}
return render(request, 'template.html', {'mydict': json.dumps(mydict)})

In your template file, ensure to include the following code:

var mydict = JSON.parse('{{ mydict|safe }}');

Answer 2

To properly handle the data, utilize JSON instead of a dictionary. You can achieve this by employing the json.dumps function:

import json

mydict = {
    "ABC": {
        "target_weight": 1,
        "target_ra_weight": 2
    },
    "XYZ": {
        "target_weight": 3,
        "target_ra_weight": 4
    },
    "JKL": {
        "target_weight": 5,
        "target_ra_weight": 6
    }
}
return render(request, 'template.html', {'mydict': json.dumps(mydict)})

In your template file, ensure to include the following code:

var mydict = JSON.parse('{{ mydict|safe }}');

Unable to utilize dictionary sent from Django to the template

Answer №1

Similar questions

Exploring the depths of Django's background processing capabilities

Creating a dropdown button with three dots in a table row using jQuery

What is the syntax for implementing a nested for loop in JavaScript within this particular scenario?

Is there an issue with implementing autosuggestion and tagging functionalities in jQuery?

The file upload functionality is functioning properly when tested with Postman, however, it is encountering issues

When extracting information from JSON, storing unidentified data member names in a generic Dictionary<string, object> is a common practice

SSL Django Cookie Cutter

When expanding a template page, all I see is a void of

Unable to assign the value of "textcontent" to null property

"Learn how to use socket.io in conjunction with the express generator to create individual sockets for each unique link

Getting assistance with Go Lang - Reaching an Array/Slice of interfaces

Adding Rotation to a group in Three.js using a pivot point

Arrange data in JSON file based on job title (role name) category

How can I retrieve PHP code output within a jQuery function?

Tips on displaying a selected choice | Utilizing Material UI Autocomplete

If the request is made via AJAX, the response will be in JSON format

Do we need to use initializeApp() from Firebase 9 when setting up email login?

Fixing PNG Fading Issue in Internet Explorer 8

Button click event is not being triggered by Ajax rendering

What is the best way to store and retrieve information in JSON format?