how to return a dictionary in python django and view it in javascript?

Question

I'm returning this in my view:

    data = {'val1' : 'this is x', 'val2' : True}
    return HttpResponse(data)

I want to use this information in the dictionary within my javascript. Kind of like this:

            function(data) {
                if (data["val2"]) {
                    //success
                    alert(data["val1"]);
                }
            }

However my javascript doesn't work. There is no alert popping up and I know that the dictionary has the information when it leaves my python view.

How can I read this information in my JS?

Ok so the answer for the view is to simplejson.dumps(data). Now when I do an alert(data) in my JS on my template I get {'val1' : 'this is x', 'val2' : True}. Now how can I manage the 2nd part of the question which is read out the values like

        function(data) {
            if (data["val2"]) {
                //success
                alert(data["val1"]);
            }
        }

UPDATE: The simplejson.dumps(data) converts th dictionary into string. So in the javascript you need to convert the string to an object. THis is the easiest but apparently unsafe way.

var myObject = eval('(' + myJSONtext + ')');

possible duplicate of Passing Python Data to JavaScript via Django — Felix Kling
– Felix Kling, Commented Jun 24, 2011 at 12:32
Even if you use Ajax, the answers in the above question will help you. — Felix Kling
– Felix Kling, Commented Jun 24, 2011 at 12:33
yes it's ajax and that question did help me understand that I must use jsdump in the view thanks. now i just want to know how to access the object in the template. — darren
– darren, Commented Jun 24, 2011 at 13:13

underrun · Accepted Answer · 2021-06-16 23:31:56Z

17

Very simply:

import json
data = {'val1' : 'this is x', 'val2' : True}
return HttpResponse( json.dumps( data ) )

edited Jun 16, 2021 at 23:31

answered Jun 24, 2011 at 12:58

underrun

6,8712 gold badges44 silver badges54 bronze badges

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

2 Comments

darren Over a year ago

ok i have this back in the JS {'val1' : 'this is x', 'val2' : True}. Now how can I access just the specific values. Like val1? like this data["val1"]? I get an undefined when I try alert(data["val1"]);

Sohaib Over a year ago

Yes it still gives undefined :(

levalex · Accepted Answer · 2011-06-25 07:50:44Z

10

JSON is easiest way to transfer data(also you can use XML).

In python:

    import json
    data = {'val1': "this is x", 'val2': True}
    return HttpResponse(json.dumps(data))

In javascript:

    function (data) {
        data = JSON.parse(data);
        if (data["val2"]) {
            alert(data["val1"]);
        }
    }

answered Jun 25, 2011 at 7:50

levalex

1012 bronze badges

1 Comment

mpaf Over a year ago

This is the correct answer, or instead specifying mimetype like in the answer of Shwetabh Sharan below

Sap · Accepted Answer · 2011-06-24 12:35:02Z

2

You can not directly use the python object you have to convert it into JSON string first Look into following documentation.

http://docs.python.org/library/json.html also http://www.json.org/

answered Jun 24, 2011 at 12:35

Sap

5,3458 gold badges61 silver badges102 bronze badges

Comments

Deepa MG · Accepted Answer · 2019-11-05 07:18:01Z

1

Just specify the mimetype in HttpResponse

    return HttpResponse(
                        json.dumps({"status":False, "message":"Please enter a report name."}) ,
                        content_type="application/json"
                        )

edited Nov 5, 2019 at 7:18

Deepa MG

1961 silver badge16 bronze badges

answered Nov 23, 2012 at 11:32

pass-by-ref

1,2982 gold badges13 silver badges21 bronze badges

1 Comment

cs01 Over a year ago

As of Django 1.9, mimetype has been replaced with content_type

Collectives™ on Stack Overflow

how to return a dictionary in python django and view it in javascript?

4 Answers 4

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related