Why am I getting jinja2.exceptions.TemplateSyntaxError: unexpected '}' [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 5 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
I can't figure-out why this error occuring,
{% block body %}
<!-- Content -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<br>
<div class="header"><h3>Ongoing Matches</h3></div>
<br>
<h3>{{ datestring_today }}</h3>
<br>
<script src="//www.cricruns.com/widget/widget_livebar.js" type="text/javascript"></script>
<! --summary---->
<div class="list-group">
{% for game in gamest %}
{% if game[]}
<a class="score-size text-xs-center nounderline list-group-item list-group-item-action" >
<div class="row">
<div class="col-xs-4">
{% if game["Batting_team_img"] %}
<img class="team-logo" src="/static/{{ game["Batting_team_img"] }}">
{% endif %}
{{ game["Batting team"] }} {{ game["runs10"] }}
</b>
<br>
{{ game["wickets10"] }}
</div>
<div class="col-xs-4 broadcast-column">
<div class="final-text">
{{ game["status2"] }}
</div>
<div class="broadcaster">
{{ game["series2"] }}
</div>
</div>
<div class="col-xs-4">
{% if game["Bowling_team_img"] %}
<img class="team-logo" src="/static/{{ game["Bowling_team_img"] }}">
{% endif %}
{{ game["Bowling team"] }} {{ game["runs20"] }}
</b>
<br>
{{ game["wickets20"] }}
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</div>
<br></br>
<div class="row">
<div class="col-lg-12">
<table class="standings-datatable table table-sm">
<thead>
<tr class="bg-primary text-white">
<th class="text-lg-center">Match Type</th>
<th class="bg-danger text-lg-center">Series</th>
<th class="bg-dark text-lg-center">Team vs Team</th>
<th class="bg-info text-lg-center">Status</th>
<th class="bg-light text-lg-center">Batting </th>
<th class="bg-primary text-lg-center">Runs</th>
<th class="bg-secondary text-lg-center">Wickets</th>
<th class="bg-success text-lg-center">Overs</th>
<th class="bg-transparent text-lg-center">Batsman Name</th>
<th class="bg-warning text-lg-center">Batsman Score</th>
<th class="bg-transparent text-lg-center">Batsman Name</th>
<th class="bg-warning text-lg-center">Batsman Score</th>
<th class="bg-transparent text-lg-center">Bowler Name</th>
<th class="bg-warning text-lg-center">Bowler Wickets</th>
<th class="bg-transparent text-lg-center">Bowler Name</th>
<th class="bg-warning text-lg-center">Bowler Wickets</th>
</tr>
</thead>
<tbody>
{% for game in gamest %}
<tr class="table table-bordered">
<td >{{ game['matchtype2'] }}</td>
<td>{{ game['series2'] }}</td>
<td>{{ game['teams2'] }}</td>
<td>{{ game['status2'] }}</td>
<td>{{ game['Batting team'] }}</td>
<td>{{ game['runs10'] }}</td>
<td>{{ game['wickets10'] }}</td>
<td>{{ game['overs10'] }}</td>
<td>{{ game['name1'] }}</td>
<td>{{ game['runs1'] }}</td>
<td>{{ game['name2'] }}</td>
<td>{{ game['runs2'] }}</td>
<td>{{ game['name5'] }}</td>
<td>{{ game['wickets5'] }}</td>
<td>{{ game['name6'] }}</td>
<td>{{ game['wickets6'] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<br></br>
<table class="standings-datatable table table-sm">
<thead class="thead-inverse">
<tbody>
<tr>
<th class="bg-dark text-lg-left">TEAM</th>
<th class="bg-dark text-lg-center">M</th>
<th class="bg-dark text-lg-left">W</th>
<th class="bg-dark text-lg-left">L</th>
<th class="bg-dark text-lg-left">T</th>
<th class="bg-dark text-lg-left">N/R</th>
<th class="bg-dark text-lg-left">PT</th>
<th class="bg-dark text-lg-left">NRR</th>
<th class="bg-dark text-lg-left">FOR</th>
<th class="bg-dark text-lg-left">AGAINST</th>
</tr>
</thead>
{% for key in tabledata %}
<tr>
<td>{{ key['Sydney image'] }}</td>
<td>{{ key['Sydney Thunder M'] }}</td>
<td>{{ key['Sydney Thunder For'] }}</td>
<td>{{ key['Sydney Thunder PT'] }}</td>
<td>{{ key['Sydney Thunder W'] }}</td>
<td>{{ key['Sydney THunder AGAINST'] }}</td>
<td>{{ key['Sydney THunder N/R'] }}</td>
<td>{{ key['Sydney THunder L'] }}</td>
<td>{{ key['Sydney THunder T'] }}</td>
<td>{{ key['Sydney THunder NRR'] }}</td>
</tr>
<tr>
<td>{{ key['Brisbane image'] }}</td>
<td>{{ key['Brisbane Heat M'] }}</td>
<td>{{ key['Brisbane Heat For'] }}</td>
<td>{{ key['Brisbane Heat PT'] }}</td>
<td>{{ key['Brisbane Heat W'] }}</td>
<td>{{ key['Brisbane Heat AGAINST'] }}</td>
<td>{{ key['Brisbane Heat N/R'] }}</td>
<td>{{ key['Brisbane Heat L'] }}</td>
<td>{{ key['Brisbane Heat T'] }}</td>
<td>{{ key['Brisbane Heat NRR'] }}</td>
</tr>
<tr >
<td>{{ key['Adelaide strikers image'] }}</td>
<td>{{ key['Adelaide Strikers M'] }}</td>
<td>{{ key['Adelaide Strikers For'] }}</td>
<td>{{ key['Adelaide Strikers PT'] }}</td>
<td>{{ key['Adelaide Strikers W'] }}</td>
<td>{{ key['Adelaide Strikers AGAINST'] }}</td>
<td>{{ key['Adelaide Strikers N/R'] }}</td>
<td>{{ key['Adelaide Strikers L'] }}</td>
<td>{{ key['Adelaide Strikers T'] }}</td>
<td>{{ key['Adelaide Strikers NRR'] }}</td>
</tr>
<tr >
<td>{{ key['Horbat Hurricanes image'] }}</td>
<td>{{ key['Horbat Hurricanes M'] }}</td>
<td>{{ key['Horbat Hurricanes For'] }}</td>
<td>{{ key['Horbat Hurricanes PT'] }}</td>
<td>{{ key['Horbat Hurricanes W'] }}</td>
<td>{{ key['Horbat Hurricanes AGAINST'] }}</td>
<td>{{ key['Horbat Hurricanes N/R'] }}</td>
<td>{{ key['Horbat Hurricanes L'] }}</td>
<td>{{ key['Horbat Hurricanes T'] }}</td>
<td>{{ key['Horbat Hurricanes NRR'] }}</td>
</tr>
<tr >
<td>{{ key['Melbourne Renegades image'] }}</td>
<td>{{ key['Melbourne Renegades M'] }}</td>
<td>{{ key['Melbourne Renegades For'] }}</td>
<td>{{ key['Melbourne Renegades PT'] }}</td>
<td>{{ key['Melbourne Renegades W'] }}</td>
<td>{{ key['Melbourne Renegades AGAINST'] }}</td>
<td>{{ key['Melbourne Renegades N/R'] }}</td>
<td>{{ key['Melbourne Renegades L'] }}</td>
<td>{{ key['Melbourne Renegades T'] }}</td>
<td>{{ key['Melbourne Renegades NRR'] }}</td>
</tr>
<tr >
<td>{{ key['Melbourne stars image'] }}</td>
<td>{{ key['Melbourne stars M'] }}</td>
<td>{{ key['Melbourne stars For'] }}</td>
<td>{{ key['Melbourne stars PT'] }}</td>
<td>{{ key['Melbourne stars W'] }}</td>
<td>{{ key['Melbourne stars AGAINST'] }}</td>
<td>{{ key['Melbourne stars N/R'] }}</td>
<td>{{ key['Melbourne stars L'] }}</td>
<td>{{ key['Melbourne stars T'] }}</td>
<td>{{ key['Melbourne stars NRR'] }}</td>
</tr>
<tr >
<td>{{ key['Perth Scorchers image'] }}</td>
<td>{{ key['Perth Scorchers M'] }}</td>
<td>{{ key['Perth Scorchers For'] }}</td>
<td>{{ key['Perth Scorchers PT'] }}</td>
<td>{{ key['Perth Scorchers W'] }}</td>
<td>{{ key['Perth Scorchers AGAINST'] }}</td>
<td>{{ key['Perth Scorchers N/R'] }}</td>
<td>{{ key['Perth Scorchers L'] }}</td>
<td>{{ key['Perth Scorchers T'] }}</td>
<td>{{ key['Perth Scorchers NRR'] }}</td>
</tr>
<tr >
<td>{{ key['Sydney Sixers image'] }}</td>
<td>{{ key['Sydney Sixers M'] }}</td>
<td>{{ key['Sydney Sixers For'] }}</td>
<td>{{ key['Sydney Sixers PT'] }}</td>
<td>{{ key['Sydney Sixers W'] }}</td>
<td>{{ key['Sydney Sixers AGAINST'] }}</td>
<td>{{ key['Sydney Sixers N/R'] }}</td>
<td>{{ key['Sydney Sixers L'] }}</td>
<td>{{ key['Sydney Sixers T'] }}</td>
<td>{{ key['Sydney Sixers NRR'] }}</td>
</tr>
{%endfor%}
</tbody>
</table>
<div class="row">
<div class="col-lg-6">
<a class="twitter-timeline" href="https://twitter.com/nikilr14/lists/hot-cric-tweets?ref_src=twsrc%5Etfw"data-aria-polite="assertive"data-chrome="noheader nofooter noborders scrollbar"data-width="500"
data-height="500">A Twitter List by nikilr14</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-lg-6">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="youtube_video" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<script>
var channelID = "UCSRQXk5yErn4e14vN76upOw";
$.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id%3D'+channelID, function(data) {
var link = data.items[0].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video").attr("src","https://youtube.com/embed/"+id + "?controls=0&showinfo=0&rel=0");
});
</script>
</div>
<div class="row">
<!-- Bballbreakdown -->
<div class="col-lg-6">
{% for title, link in cricinfo_posts.items() %}
<a class="reddit-boxes nounderline list-group-item list-group-item-action" href="{{ link }}">
{{ title }} <img class="team-logo" src="/static/images/espncricinfo.png">
</a>
<br>
{% endfor %}
</div>
<!-- Fansided Nylon Calculus -->
<div class="col-lg-6">
{% for title, link in cricbuzz_posts.items() %}
<a class="reddit-boxes nounderline list-group-item list-group-item-action" href="{{ link }}">
{{ title }} <img class="team-logo" src="/static/images/cricbuzz.png">
</a>
<br>
{% endfor %}
</div>
</div>
<div class="col-lg-6">
{% for title, link in yahoonews_posts.items() %}
<a class="reddit-boxes nounderline list-group-item list-group-item-action" href="{{ link }}">
{{ title }} <img class="team-logo" src="/static/images/yahoocricnews.png">
</a>
<br>
{% endfor %}
</div>
<div class="col-lg-6">
{% for title, link in bigbash_posts.items() %}
<a class="reddit-boxes nounderline list-group-item list-group-item-action" href="{{ link }}">
{{ title }} <img class="team-logo" src="/static/images/bbl.png">
</a>
<br>
{% endfor %}
</div>
</div>
<!-- Reddit -->
<div class="row">
<div class="col-lg-6">
{% for i in range(1, 10, 2) %}
<a class="reddit-boxes nounderline list-group-item list-group-item-action" href="https://reddit.com{{ hot_Cricket_posts[i].permalink }}">
{{ hot_Cricket_posts[i].title }} <img class="team-logo" src="/static/images/reddit.png">
</a>
<br>
{% endfor %}
</div>
<div class="col-lg-6">
{% for i in range(2, 11, 2) %}
<a class="reddit-boxes nounderline list-group-item list-group-item-action" href="https://reddit.com{{ hot_Cricket_posts[i].permalink }}">
{{ hot_Cricket_posts[i].title }} <img class="team-logo" src="/static/images/reddit.png">
</a>
<br>
{% endfor %}
</div>
</div>
</div>
{% endblock %}
sorry for irregular in code structure, any improvement in the code will be appreciated, I looked every '}' in code but I didn't find any wrong syntax.I looked into jinja2 documentation, my code followed every syntax rules as mentioned in documentation yet I'm getting template syntax error, If you want to know more about the code feel free to ask, thanks.

Check out these lines:
{% for game in gamest %}
{% if game[]}
...
You are missing the closing % character.
You might receive an error about game[] as well.

Related

Vue if statement while display data from api

I am getting some data from an Api and I want to check if the vtype is "car". Here is how I loop :
<tr v-for="vehicles_group in vehicles_groups.data" :key="vehicles_group.gid">
<td>
<input type="checkbox">
</td>
<!-- <td>{{ vehicles_groups.gid }} </td> -->
<td>{{ vehicles_group.title }}</td>
<td>{{ vehicles_group.vtype }}</td>
<td>{{ vehicles_group.company }}</td>
<td>{{ vehicles_group.active }}</td>
<td>{{ vehicles_group.priceincludes }}</td>
<td>{{ vehicles_group.categories }}</td>
<td>{{ vehicles_group.earlybook }}</td>
<td>{{ vehicles_group.earlybook }}</td>
</tr>
Is there a way in vue to check if the value of a Api output is car console something?
For example
if {{ vehicles_group.vtype }} == car{
console.log('its a car', vehicles_group.vtype )
}
Sure.
If you want to use v-if in your template:
<td v-if="vehicles_group.vtype == 'car'">
It's a car
</td>
<td v-else>
It's not a car
</td>
If you want to this in your component JavaScript code, you can do it as usual:
if (vehicles_group.vtype == "car") {
console.log('its a car', vehicles_group.vtype )
}

Hide link html depending on variable

i have a flask app running and in an html template i have this
<table style="width:90%">
<thead><tr><th>Name</th><th>Requested_time</th><th>Description</th><th>Assigned_To</th><th>Status</th><th>Type</th><th>Priority</th></tr></thead>
<tbody>
{% for row in rows %}
<tr>
<td>{{ row.name }}<a style="float: right" href="{{url_for('EditUserRequests', Request_id = row.id) }}" >(Edit)</a> </td>
<td>{{ row.Record_Created }}</td>
<td>{{ row.Description }}</td>
<td>{{ row.Assigned_To }}</td>
<td>{{ row.Status_Name }}</td>
<td>{{ row.Type_Name }}</td>
<td>{{ row.Priority_Name }}</td>
</tr>
{% endfor %}
</tbody>
</table>
i want the link called Edit
to be either visible or invisible depending on the string written in the
row.Status_Name
in each of the table's rows
which might change in each row depending on a database
how can it be done in js ?
if there's an example i'll be thankful
thanks to Quentin
this simple made it
<td>{{ row.name }}
{% if row.Status_Name == "Created" %}<a style="float: right" href="{{url_for('EditUserRequests', Request_id = row.id) }}" >(Edit)</a>
{%endif%} </td>

Vuejs appending html after click on element

I have a table that fills with data from json. So how i can append a new after cllicked element ?
<tbody>
<tr v-for="f in firm" class="main" >
<td id="ccc">{{ f.name.toUpperCase() }}</td>
<td>{{ f.open }}</td>
<td>{{ f.max }}</td>
<td>{{ f.min }}</td>
<td>{{ f.close }}</td>
<td>{{ f.change }}</td>
<td>{{ f.trans }}</td>
<td>{{ f.vol }}</td>
</tr>
</tbody>
This code creata for me my table with data And now i want to click one element and after this element append new tr. I try create methods but every my idea wail
If you change the data that your HTML is rendering, the HTML will update automatically. Since the code renders a <tr> for each item in the firm array, add an item to the firm array to make a new <tr>. See the demo below.
new Vue({
el: '#app',
data: {
firm: []
},
methods: {
addRow() {
this.firm.push({
name: 'new row',
open: 'open',
max: 'max',
min: 'min',
close: 'close',
change: 'change',
trans: 'trans',
vol: 'vol',
})
}
}
})
<div id="app">
<button #click="addRow">Add new row</button>
<table>
<tbody>
<tr v-for="f in firm" class="main">
<td id="ccc">{{ f.name.toUpperCase() }}</td>
<td>{{ f.open }}</td>
<td>{{ f.max }}</td>
<td>{{ f.min }}</td>
<td>{{ f.close }}</td>
<td>{{ f.change }}</td>
<td>{{ f.trans }}</td>
<td>{{ f.vol }}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://unpkg.com/vue"></script>

Appending from one table to another then deleting/manipulating data

I am trying to add from one table to another with .click and i got it to work
but now when i try to use the search field on the top table it clears the appended rows from the bottom table
I need to get these to start generating a table under it so that i can delete them all together
$(document).ready(function(){
$("#student-table2 tbody tr").click(function(){
$(this).css("background-color", "#f4a941")
.appendTo("#student-table3 tbody");
});
$("#student-table2").DataTable();
$("body").on("click", "#student-table2 tbody tr", function(){
$("#student-table3").data("stu-id", $(this).data("id"))
.data("stu-name", $(this)
.data("name"));
});
$("#access-table").DataTable();
$(".datetimepicker").datetimepicker({
format: 'MM/dd/yyyy hh:mm:ss',
});
});
Like i mentioned, it seems i can add the data to the table , but it wont store the row i select on table 2 when i use the search field atop the first table
I was thinking , maybe i can just have jquery generate the entire table with table placeholders already set in place? and not have it at all in HTML like i do, see under, i have student-table and student-table2 stacked
Here's my HTML
{% include "core/header.html" %}
{% load widget_tweaks %}
<section class="ids-section form-section">
<h2>{{ title }}</h2>
<h2> All Students </h2>
<table id="student-table2" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>School</th>
<th>License Plate</th>
<th>Active</th>
<th>Code</th>
<th>Added</th>
</tr>
</thead>
<tbody>
{% for stu in students %}
<tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
<td>{{ stu.name }}</td>
<td>{{ stu.school }}</td>
<td>{{ stu.license_plate }}</td>
<td>{{ stu.active }}</td>
<td>{{ stu.code }}</td>
<td>{{ stu.created }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<h2> Selected for Delete </h2>
<table id="students-table3" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>School</th>
<th>License Plate</th>
<th>Active</th>
<th>Code</th>
<th>Added</th>
</tr>
</thead>
<tbody>
<br>
<tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
<td>{{ stu.name }}</td>
<td>{{ stu.dealership }}</td>
<td>{{ stu.license_plate }}</td>
<td>{{ stu.active }}</td>
<td>{{ stu.code }}</td>
<td>{{ stu.created }}</td>
</tr>
</tbody>
</table>
</section>
</div>
{% include "core/footer.html" %}
I figured out that i actually was on the right track, i didnt know .dataTables() was a bootstrap marker for the tables so i simplified the remfunc.js file to
/* Main part- on click adds to second table */
$(document).ready(function(){
$("#student-table2 tbody tr").click(function(){
$(this).appendTo("#student-table3 tbody");
});
/* Formats the table to coginate,
gives it an inputFilter and wraps it.
*/
$("#student-table2").DataTable();
});
$("#access-table").DataTable();
$(".datetimepicker").datetimepicker({
format: 'MM/dd/yyyy hh:mm:ss',
});
});
with and html file that looked like
{% include "core/header.html" %}
{% load widget_tweaks %}
<section class="ids-section form-section">
<h2>{{ title }}</h2>
<h2> All Students </h2>
<table id="student-table2" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>School</th>
<th>License Plate</th>
<th>Active</th>
<th>Code</th>
<th>Added</th>
</tr>
</thead>
<tbody>
{% for stu in students %}
<tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
<td>{{ stu.name }}</td>
<td>{{ stu.school }}</td>
<td>{{ stu.license_plate }}</td>
<td>{{ stu.active }}</td>
<td>{{ stu.code }}</td>
<td>{{ stu.created }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<h2> Selected for Delete </h2>
<table id="students-table3" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>School</th>
<th>License Plate</th>
<th>Active</th>
<th>Code</th>
<th>Added</th>
</tr>
</thead>
<tbody>
<br>
<tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
<td>{{ stu.name }}</td>
<td>{{ stu.dealership }}</td>
<td>{{ stu.license_plate }}</td>
<td>{{ stu.active }}</td>
<td>{{ stu.code }}</td>
<td>{{ stu.created }}</td>
</tr>
</tbody>
</table>
</section>
</div>
{% include "core/footer.html" %}

AngularJS repeat filter from input

I have a problem. I have this code but it does not work why? It works in an other project. I have a table and filter it with an input field.
<md-content class="md-padding">
<br>
<md-input-container>
<label>search</label>
<input ng-model="searchCManager" placeholder='lss_user_id'>
</md-input-container>
<table class='table'>
<thead>
<tr class='header'>
<td>user_id</td>
<td>start_number</td>
<td>lss_user_id</td>
<td>agency_number</td>
<td>business_unit_number</td>
<td>office_id</td>
<td>corporate_id</td>
<td>asw_id</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in terminalOverview | filter:searchCManager " ng-class="{'noTerminal': x.terminals.length == '0' || x.terminals.length == 'terminal'}">
<td>{{ x.user_id }}</td>
<td>{{ x.start_number }}</td>
<td>{{ x.lss_user_id }}</td>
<td>{{ x.agency_number }}</td>
<td>{{ x.business_unit_number }}</td>
<td>{{ x.office_id }}</td>
<td>{{ x.corporate_id }}</td>
<td>{{ x.asw_id }}</td>
</tr>
</tbody>
</table>
</md-content>
If you want to filter based on user_id Just try this
<input ng-model="searchCManager.user_id" placeholder='lss_user_id'>

Categories

Resources