jquery - JSON passed from Python (Flask) into JavaScript is displaying on screen -

i passing json python back-end front-end javascript i'm running webgl (three.js) animation. json holds numerical values determine happens in animation. problem while have basic ajax request working, json being printed screen (in lieu of animation) rather becoming variable can iterate through control aspects of animation. 2 halves of call shown below.

i asked related question 1 before , got great help, still missing piece of puzzle. i've been reading docs , sorts of sources, yet need nudge in right direction working. appreciated!

in python backend:

from flask import response, json, render_template, jsonify app import app motifs import get_motif, get_motif_list  @app.route('/') def index():     motifs = get_motif_list(10) #     first version of return below sends data, yet printed  #     screen, rather being stored data in variable.     return response(json.dumps(motifs), mimetype='application/json') #     version of return not work: #     return render_template("index.html", motifs = motifs)  

in javascript (note console.log sanity checks don't work - have no idea why:

function foo() {     var array_data;      $.ajax({         type: "get",         url: "/",         datatype: "json"     });      request.done(function(json_array) {         array_data = json.parse(json_array)["array"]         console.log(array_data); // sanity check - doesn't work     });     return array_data; };  var array = foo(); console.log(array); // sanity check - doesn't work 

update

with advice below, i'm pretty close having off ground. json no longer printing screen (an issue caused flask return), , i've solved multifunction callback issue discovered along way. however, getting parsererror complete textstatus. think problem lays in python/flask (see current code below). again who've helped!

python/flask (i think problem here - i'm noob flask):

from flask import response, json, render_template, jsonify app import app motifs import get_motif, get_motif_list  @app.route('/') def index():     motifs = get_motif_list(10)     return response(json.dumps(motifs), mimetype='application/json')  @app.route("/") def index():      return render_template("index.html") 

the javascript (the data returned deferred object - used solve callback issue):

function getdata() {      var deferreddata = new jquery.deferred();      $.ajax({         type: "get",         url: "/",         datatype: "json",         success: deferreddata.resolve(),         complete : function(xhr, textstatus) {             console.log("ajax request complete -> ", xhr, " -> ", textstatus)}     });      return deferreddata; // contains passed data }; 

it turns out had lot of problems in code above, several of had debug in related questions here , here.

among them were:

• in original flask index() function, dumping json data screen because not rendering index.html template anywhere.
• i had matching routes ('/') , function names (index()) in flask functions
• as mentioned in comments did unnecessary double parsing of json datatype: json , array_data = json.parse(json_array)
• the return asynchonous function came undefined because referenced before call had resolved
• in later update deferred object, success property should have read: success: function(data) { deferreddata.resolve(data);}

so, after fixes, here functioning code!

flask/python:

from flask import response, json, render_template, jsonify app import app motifs import get_motif, get_motif_list  @app.route('/ajax') def ajax() :     motifs = get_motif_list(10)     return response(json.dumps(motifs), mimetype='application/json')  @app.route("/") def index():      return render_template("index.html") 

javascript: (note: foo() function in question above)

function getdata() {      var deferreddata = new jquery.deferred();      $.ajax({         type: "get",         url: "/ajax",         datatype: "json",         success: function(data) {              deferreddata.resolve(data);             },         complete: function(xhr, textstatus) {             console.log("ajax request complete -> ", xhr, " -> ", textstatus);             }     });      return deferreddata; // contains passed data };   // used deferred structure below because later added deferred objects other asynchronous functions `.when`  var datadeferred = getdata();  $.when( datadeferred  ).done( function( data ) {     console.log("the data is: " + data);     });