Convert dictionary to Javascript JSON Object?

Question

From views.py I have a dictionary that is like this:

BgDict = {
            '1': '#031B4D', 
            '0': '', 
            '3': '#062847', 
            '2': '#303E4D', 
            '5': '#115478', 
            '4': '#00122e', 
            '7': '#152324', 
            '6': '#243447', 
            '8': '#11202F'
        }

I would like to convert this dict BgDict to Javascript Json Object in jinja2 template, so my whole code is like this

views.py

@app.route('/User/Profile/', methods=['GET', 'POST'])
def getFormUpload():

    BgDict = {
                '1': '#031B4D', 
                '0': '', 
                '3': '#062847', 
                '2': '#303E4D', 
                '5': '#115478', 
                '4': '#00122e', 
                '7': '#152324', 
                '6': '#243447', 
                '8': '#11202F'
            }

    return render_template("profile.html",  BgDict=json.dumps(BgDict))

profile.html

<script>
    var bgjson = '{{BgDict|tojson|safe}}';
    console.log(jQuery.type(bgjson));
    console.log(bgjson[4]); // it should be #00122e but it is :
</script>

From console log, its type is String therefore bgjson[4] is : instead of #00122e.

What happened with this? How can I get json object out of BgDict? Thanks.

If you're already doing json.dumps(...) before passing it to the template - why do you need |tojson in the template itself? Looks like you want one or the other - not both. Also... don't you need a var jsonData = JSON.parse(bgjson) in there? — Jon Clements
– Jon Clements, Commented Aug 16, 2018 at 8:55
@JonClements, I just tried working around, but it still does not work even I removed |tojson, it was still the same. Thanks — Houy Narun
– Houy Narun, Commented Aug 16, 2018 at 8:59
And did you do JSON.parse(...) to actually make the string an object? — Jon Clements
– Jon Clements, Commented Aug 16, 2018 at 9:00
@JonClements, ah yeah it is,JSON.parse(bgson) now I can get json object and its value. Thanks so much for your help :) — Houy Narun
– Houy Narun, Commented Aug 16, 2018 at 9:06

Rafał · Accepted Answer · 2018-08-16 09:10:38Z

3

Use JSON.parse method

<script>
    var bgjson = {{BgDict|tojson|safe}};
    console.log(jQuery.type(bgjson));
    console.log(JSON.parse(bgjson)[4]);
</script>

answered Aug 16, 2018 at 9:10

Rafał

7056 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Convert dictionary to Javascript JSON Object?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related