0

I'm a newbie in web development. In fact I knew nothing about it one week ago. Now I have a project on it assigned by senior colleagues. The data is obtained using python, and the bridge from python to javascript is Flask, in main.py. In reality the data is much longer and returned by other function, but with format jsonify()

@app.route("/")
def home():
    # JSON
    data = '{ "name":"John", "age":30, "city":"New York"}'
    response = render_template('home.html', data=data)

My question is how to access this JSON data in a JS file like handle_data.js? I want to make a highchart from this data into my home.html Django Template Variables and Javascript this one doesn't work for me.

Improve this question
0

3 Answers 3

Reset to default
3

It will be helpful if you create data as a dictionary rather than the string in python because it gets easily interpreted by jinja2 templating engine. (Also, it looks like your data is jsonified already - you mentioned data is returned by another function and is formatted by jsonify()).For accessing the data variable in JS file, you first need to include the js file in your view (i.e. the html page) using tag. Then, beneath that script tag, you need to pass the data variable to a function defined in your js file (handle_bar.js)

Sample code for html file:

<html>
<head>
<body>
Some text
<script src="path/to/handle_bar.js"></script>
<script>
loadData({{data}});
 </script>
</body>
</html>

Now your handle_bar.js should look like:

var myData;

function loadData(data){

myData = data;
console.log(myData);
}
//Use data freely in js file now using myData variable
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks a lot for your replay, should we put <script> loadData({{data}}); </script> before <script src="path/to/handle_bar.js"></script>?
Put <script> loadData({{data}}); </script> after <script src="path/to/handle_bar.js"></script>
Yep. I just did something similar to yours half an hour ago and the issue is solved. What I did is <script>var globaldata={{data|tojson|safe}}; </script> <script src="path/to/handle_bar.js"></script> and then I could access globaldata in handle_bar.js, the JSON is obtained by JSON.parse(globaldata)
I changed to this method at last, because this will hide the date from HTML while my last solution can't.
0

You can put this kind of substitution into your JavaScript.

<script type="text/javascript"> 
   var a = "{{someDjangoVariable}}";
</script>


var data = '{ "name":"John", "age":30, "city":"New York"}'

var parseData = JSON.parse(data)

console.log(parseData);

What error are you getting if you follow Django Template Variables and Javascript ?

Improve this answer

1 Comment

I'm told Uncaught SyntaxError: Unexpected token { in JSON at position 1. It seems that if we want to access JSON in JS file outside of home.html, we would have a problem.
0

Here are the steps:

  1. Get the JSON data. That could come from a local file or an API. If you need help with this step, Google how to import a JSON file to JavaScript or how to make an HTTP call.
  2. Parse the JSON data and assign it to an object: var myData = JSON.parse(data);
  3. The data is now in a typical JavaScript object.
Improve this answer

1 Comment

Thanks, in deed it's the step 1 I need help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.