简体   繁体   中英

print JSON string converted from python object using flask

I have this flask server running and i made this html file which has a script where when i clicked the button it will return a JSON string. However it kept giving me undefined instead. I have this app.py code which gives me a python dict which i converted it to JSON

@app.route('/')
def helloworld():
    #result = jsonify(student)
    html_item = json.dumps(Marks, indent=2, separators=(', ', ': '))
    return render_template('test1.html',data = html_item)

after this on the test1.html i have a script

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            JavaScript | Print content of object 
        </title> 
    </head>  

    <body style = "text-align:center;" id = "body">  

        <h1 style = "color:rgb(0, 2, 128);" >  
           {{data}}
        </h1> 

        <p> 
            Print JavaScript Object. 
        </p> 

        <button onclick = "gfg_Run()">  
            print object 
        </button> 

        <p id = "GFG_DOWN" style 
                = "color:rgb(0, 2, 128); font-size: 20px; font-weight: bold;"> 
        </p> 

        <script> 
            var el_down = document.getElementById("GFG_DOWN"); 

            var GFG_object = { 
                prop_1: 'val_11', 
                prop_2: 'val_12',  
                prop_3: 'val_13' 
            }; 

            function gfg_Run(data) {  
                el_down.innerHTML = data;
                //el_down.innerHTML = JSON.stringify(GFG_object); 
            } 

        </script>  
    </body>  
</html>    


where I have tested that it can print out a js object by the line I commented out. How should I print out a JSON string which in my case data properly?

I am assuming you should know how to retrieve json data?!
If not, then visit: https://www.programiz.com/python-programming/json

Now that you know how to retrieve data stored in json format, and you should put the value straight into inner_html like:

el_down.innerhtml = data['val'] 

Or however, your json structure might be...
I think the way you are accessing json data is not correct. Please let me know after you try this solution.

You are not rendering your json string in your html template

Just having the word data is not going to take the data variable from your python script and replace it with your json. You need it surrounded in curly braces {{}}

//incorrect
myobject = data;
//correct
myobject = {{ data|safe }};

So to get your example working you could do

var GFG_object = {{data|safe}};

//took out the "data" from the parameter list
//since you aren't passing anything to gfg_Run()
function gfg_Run() {  
  //prints your object as a json string
  el_down.innerHTML = JSON.stringify(GFG_object);
}

//if you are wanting print some property of your object
function gfg_Run() {  
  el_down.innerHTML = GFG_object["val"];
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM