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.

George J Padayatti
  • 848
  • 1
  • 6
  • 19
Xiangpeng
  • 44
  • 8

3 Answers3

2

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
Vimanyu
  • 625
  • 2
  • 9
  • 24
  • Thanks a lot for your replay, should we put `` before ``? – Xiangpeng Mar 13 '18 at 03:51
  • Put `` after `` – George J Padayatti Mar 13 '18 at 03:53
  • Yep. I just did something similar to yours half an hour ago and the issue is solved. What I did is ` ` and then I could access `globaldata` in `handle_bar.js`, the JSON is obtained by `JSON.parse(globaldata)` – Xiangpeng Mar 13 '18 at 04:01
  • I changed to this method at last, because this will hide the date from HTML while my last solution can't. – Xiangpeng Mar 16 '18 at 02:17
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 ?

Harsh Makadia
  • 3,263
  • 5
  • 30
  • 42
  • 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. – Xiangpeng Mar 14 '18 at 06:26
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.
Z Charnell
  • 1
  • 2