Menu
jinja2.exceptions.UndefinedError: 'car' is undefined
main.js
(function ()
{
'use strict';
angular.module('WordcountApp', [])
.controller('WordcountController', ['$scope',
function($scope)
{
$scope.some = 'jjj'
console.log( "in WordcountController " , $scope.some)
$scope.cars = [
{make: 'Mazda', model: 'Miata', year: 2001},
{make: 'Toyota', model: 'Prius', year: 2013},
{make: 'Tesla', model: 'S', year: 2015},
{make: 'BMW', model: '325i', year: 2012}
]
}
]
);
}()
);
index.html
<!DOCTYPE html>
<html ng-app = "WordcountApp" >
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"> </script>
<script src = "static/main.js" > </script>
</head>
<body ng-controller = "WordcountController">
<ul ng-repeat = "car in cars" >
<p> {{ car.make }} </p>
</ul>
</body>
</html>
app.py
from flask import Flask
from flask import render_template
from flask import request
app = Flask( __name__ )
displayText = 'Default text from Python'
@app.route('/', methods=['GET', 'POST'])
def index():
return render_template('index.html')
@app.route("/writeOutput", methods=['POST'])
def writeOutput():
global displayText
print("request.get_json():- ", request.get_json())
displayText = request.get_json()['myOutput']['myText']
print ("from POST " , displayText)
return displayText
@app.route("/displayPreviousText", methods=['GET'])
def displayPreviousText():
global displayText
return displayText
if __name__ == "__main__":
app.run()
I run this application as python app.py
Error:
jinja2.exceptions.UndefinedError: 'car' is undefined
What is the way to access the list in html from angular?
246
You error Error: jinja2.exceptions.UndefinedError: 'car' is undefined is not related to JavaScript. The problem seems to be as follows - Jinja2 template renderer also relies on double curly braces same as AngularJS {{ your expression here }}.
There are several solutions that could be used to solve this
You may change the interpolate notation for Angular i.e.
angular.module('WordcountApp', [])
.config(['$interpolateProvider', function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}]);
So your javascript/html code should look as follows
(function ()
{
'use strict';
angular.module('WordcountApp', [])
// Setting up new interpolation delimiter which does not conflict with Jinja2
.config(['$interpolateProvider', function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}])
.controller('WordcountController', ['$scope', function($scope) {
$scope.some = 'jjj'
console.log( "in WordcountController " , $scope.some)
$scope.cars = [
{make: 'Mazda', model: 'Miata', year: 2001},
{make: 'Toyota', model: 'Prius', year: 2013},
{make: 'Tesla', model: 'S', year: 2015},
{make: 'BMW', model: '325i', year: 2012}
]
}])
}()
);<!DOCTYPE html>
<html ng-app = "WordcountApp" >
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"> </script>
<script src = "static/main.js" > </script>
</head>
<body ng-controller = "WordcountController">
<ul ng-repeat = "car in cars" >
<!-- Utilizing new interpolation delimiter -->
<p> [[ car.make ]] </p>
</ul>
</body>
</html>
Also, I believe that a more simple way should work like
<ul ng-repeat = "car in cars" >
<p> {{ '{{ car.make }}' }} </p>
</ul>
which will use Jinja2 templater first and the output for the raw HTML would be correct AngularJS syntax. But I'm not 100% sure about this way and cannot check it right now.
Also while researching your problem I've found one more solution which could be used for solving your problem. Flask-Triangle provides a filter angular to tell Jinja if the evaluation of an expression must be rendered as an Angular expression. The undefined variables are rendered as-is in the HTML output.
In this case your html part code should look as follows
<body ng-controller = "WordcountController">
<ul ng-repeat = "car in cars" >
<p> {{car.make|angular}} </p>
</ul>
</body>
You can read more about this solution
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With