use js variable in Django - html

userlist.html
<a id="{{user.id}}" href="/followerPosting?id={{following.id}}" class="btn">profile</a>
I want to pass the id value to the url when the btn is clicked.
followerPosting.html
<script type="text/javascript">
var url = require('url');
var queryData = url.parse(request.url, true).query;
var fid = queryData.id;
</script>
So I parsed the URL and stored the id value in a variable (fid).
{% for twit in twits %}
{% if twit.User.id == fid %}
<div class="twit">
<div class="twit-content">{{twit.content}}</div>
</div>
{% endif %}
{% endfor %}
I want to use this variable in html (django)
how can I use this value?
I tried to use Ejs but it didn't work well...

Related

How to pass a concatenated string to HTML using Jekyll include?

I have to make a string of values separated by semicolons and pass this string to a script in HTML include to then parse and output the result.
My jekyll markdown page:
---
layout: page
title: Our team
permalink: /team
---
{% assign cfhandles=""%}
{% for person in site.data.team-handles %}
{{ cfhandles | append: person.handle }}
{{ cfhandles | append: ";" }}
{% endfor %}
{% include load-ratings.html cfhandles=cfhandles %}
My load-ratings.html:
<script>
let url = "https://codeforces.com/api/user.info?handles=";
let handles = "{{ include.cfhandles }}";
console.log(handles);
url = url + handles;
console.log(url);
async function load() {
let obj = await (await fetch(url)).json();
console.log(obj);
for (let cur_user of obj["result"]) {
let cur_handle = cur_user["handle"];
let user_rating = cur_user["rating"];
document.getElementById(cur_handle.toLowerCase()).innerHTML = "Рейтинг: " + user_rating;
}
}
load();
</script>
My team-handles.yml:
- handle: bob1
name: Bob
- handle: alice2
name: Alice
When I open the developer console, it shows me that in JS the handles variable is empty (but it shouldn't be like that). How do I pass the needed string to the file so it shows correctly?
I already tried using {%- -%} Liquid tags, but it didn't change the result.
Try this:
{% assign cfhandles=""%}
{% for person in site.data.team-handles %}
{% assign cfhandles = cfhandles | append: person.handle | append: ";" %}
{% endfor %}
{% include load-ratings.html cfhandles=cfhandles %}
The code basically assigns the new strings bob1; and alice2; to the existing variable.

How to use variables in a <a href> html tag using jinja?

Below is a made example of what I am trying to do. Essentially I am trying to create variables to reduce the amount of clutter and for other reasons. The link goes to in this case "use_var" and not the correct link. Is there a way to use a variable in the "a href = portion"?
{% set ht = 'http:' %}
{% set url_path = '//random_url:' %}
{% set port = '8000' %}
{% set use_var = '{{ ht }} {{ url_path }} {{ port }}' %}
{% set url = ' example url ' %}
... html code...
<tr>
<td> {{ url }} </td
If i did:
{% set url = ' example %}
It'll work that way but I am trying to avoid having to do that for each link.
I've tried the 'join' and it still results with "The requested URL /{{ use_var }} was not found...
You Can try in this way:
{% set use_var = [ht, url_path , port]|join(',') %}
The answer is
{% set use_var = ht + url_path + port %}
{% set url = '<a href = ' + use_var + '> example url </a>' %}
this will retrieve the correct path

How to access field names of javascript object in HTML passed in from backend?

Example:
var obj={name:bob,
}
I want to access not the value of name i.e. bob instead an array containing keys of obj like [name].
<h1>{{ pagename|title }}</h1>
<ul>
{% for author in collections %}
<li >
{{ author.uno }}
{{ author.subject }}
<script>
var array = Object.keys(author).map((key) => key) ;
document.write('<p>' + array + '</p>');
</script>
{% for element in author %}
<li >
{{element }}
</li>
{% endfor %}
</li>
{% endfor %}
</ul>
Here collections is an array of objects passed in from backend i.e. nodejs.
Author is a javascript object.
I have tried getting desired result using logic inside script tag.
But it is not printing anything on webpage.
I have also tried placing {{}} at different positions without getting fruitful results.
update: I forgot you're using swig-template. Here is my suggestion:
//backend :
const author = { /* author object */ };
author.keys = Object.keys(author).join(', ');
swig.renderFile('/path/to/template.html',{ author });
and then, put it in template.htm;
{{ author.subject }}
{{ author.keys }}
{% for element in author %}
<li >
{{element }}
</li>
{% endfor %}

How to add nunjucks-date-filter?

I can't understand where should i put all this code ,
https://github.com/e-picas/nunjucks-date-filter
i have this structure
enter image description here
this is my template
<div class="container">
<div class="row">
<div class="col-5">
{% for date, block in block | groupby("date") %}
<div class="date">{{ date}}</div>
{% for name, block in block | groupby("name") %}
<div class="about">{{ name }}</div>
{% endfor %}
{% for id, block in block | groupby("id") %}
<div class="id">{{ id }}</div>
{% endfor %}
{% for blocks in block %}
<img onError="this.src='/img/no-photo.png'" src="{{blocks.image}}" alt="">
{% endfor %}
{% endfor %}
</div>
</div>
</div>
at this moment i have a date format from Json file like this dd-mm-yyyy , want to change it with filter to D-MMM.
I was in a similar situation. The nunjucks-date-filter readme recommends using the Nunjucks Environment API to add filters. But I found this doesn't work as the env object was never applied to the Nunjucks instance.
Here's how I got around it, assuming you're using express:
// main.js
const app = express();
const nunjucks = require('nunjucks');
const dateFilter = require('nunjucks-date-filter');
function setUpNunjucks(expressApp) {
let env = nunjucks.configure('views', {
autoescape: true,
express: app
});
// note that 'date' is the function name you'll use in the template. As shown in nunjucks-date-filter's readme
env.addFilter('date', dateFilter);
}
setUpNunjucks();
Then in your template just define the date format you want:
{% for date, block in block %}
<div class="date">{{ date | date("D MMM") }}</div>
{% endfor %}

Include variable array value

I've got some component button:
{% assign class = "c-button " | append: include.class %}
{% assign type = include.type | default: "button" %}
{% assign content = include.content %}
{% if content %}
<button class="{{ class }}"
type="{{ type }}">{{ content }}</button>
{% endif %}
Now i want include a button with some values and content out an array:
{% include components/button.html
type = "button"
content = site.data.contentful.spaces.links.navbar[0].item_name
class = "pretty-button"
%}
I receive this error:
Liquid Exception: Invalid syntax for include tag: type = "button"
content = site.data.contentful.spaces.links.navbar.[0] class =
"pretty-button" Valid syntax: {% include file.ext param='value'
param2='value' %}
Is it not possible to assign an array value to a include variable?
Thanx for any help!
The include tag currently does not parse variable values with syntaxes like navbar[0]. Only "simple quoted strings" or "variables comprising alphanumericals and/or a hyphen".
content = site.data.contentful.spaces.links.navbar[0].item_name will be flagged but content = site.data.contentful.spaces.links.navbar.item_name will be passed through for evaluation.
You can use the capture tag to pre-eval the flagged variable and then inserted via a simple variable:
{% capture my_content %} site.data.contentful.spaces.links.navbar[0].item_name {% endcapture %}
{% include components/button.html type = "button" content = my_content class = "pretty-button" %}
Note that include tag is defined in a single line due to a bug in the parse regex that ignores multiline strings. The patch is included in jekyll-3.8.0.pre.rc1