AngularJS + Flask : render_template with some data

Question

I am returning a template with some data from Flask server to angularJS.

jsonObject - {"name" : "alan"}

Server

@app.route("/hello")
    return render_template("hello.html", result=jsonObject)

Client

maincontroller.js

  var app=angular.module('myApp',[]);
  app.controller("MainController", function($scope,$http){

  var done=function(resp){
    //how to get the response data from server
    $scope.list=?
  };
  var fail=function(err){

  };

  $http.get('http://127.0.0.1:8083/hello')
  .then(done,fail);

});

hello.html

<body>

 Hello {{list.name}}!!

</body>

How to get the response object in the controller with render_template in the server?

corvid · Accepted Answer · 2014-07-17 03:39:55Z

0

you could put the json on the page as one solution

<script>var jsonObject = {{ jsonObject|tojson|safe }}</script>

answered Jul 17, 2014 at 3:39

corvid

11.3k12 gold badges71 silver badges135 bronze badges

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

2 Comments

Taryn East Over a year ago

Hiya, this may well solve the problem... but it'd be good if you could provide a little explanation about how and why it works :) Don't forget - there are heaps of newbies on Stack overflow, and they could learn a thing or two from your expertise - what's obvious to you might not be so to them.

user3089927 Over a year ago

this will not solve the problem I guess since here the major thing is to populate the $scope.list variable with the jsonObject. Once I have the list variable populated. I can access as {{list.name}}. Please correct me if I am wrong.

Nava · Accepted Answer · 2014-07-17 07:47:12Z

0

I am giving you the example solution for your issue.You have to understand and you can solve your problem

sample data

{'result':["item1","item2","item3"]}

views.py

from flask import jsonify
@app.route('/s/', methods=('GET',))
def search_query():
   """
    View which is called whenever the '/s/' this url is requested
   """
    return jsonify({'result':["item1","item2","item3"]})

You have to return as json instead of using render_template.

Angular interaction

$http.get("/s/").then(function(r) {
                    $scope.results = r.data.result;
                    alert(r.data.result); //verify your response data
                    });

you can do your manipulation from the results attribute of angular scope.

edited Jul 17, 2014 at 7:47

answered Jul 17, 2014 at 7:29

Nava

6,6069 gold badges47 silver badges69 bronze badges

3 Comments

user3089927 Over a year ago

thanks for the code snippet but I know how to send the json response. but is there any way to send the response with html. I tried looking into ui-router but that is not working as well.

Nava Over a year ago

if the html is static, you have to load it dynamically, you could do by passing value as argument to angular view. any way in the webservice you could pass data not render template IMHO.

user3089927 Over a year ago

so how can I attain the same thing if I pass just the json response. Suppose, I send the json response from the server and in the controller, whenever my html hits that route, my scope will render the variable value into the html. But how should I make my html hit the route? Could you suggest a workaround of attaining what I want to do in the main question?

Collectives™ on Stack Overflow

AngularJS + Flask : render_template with some data

Server

Client

maincontroller.js

hello.html

2 Answers 2

2 Comments

sample data

views.py

Angular interaction

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Server

Client

maincontroller.js

hello.html

2 Answers 2

2 Comments

sample data

views.py

Angular interaction

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related