How to apply a slice to a back-end generated data?

Question

Here are my 2 datas in a <div>:

<div class="NP" id="sliced">{{app.user.Firstname}}{{app.user.Lastname}}</div>

I would like to slice these 2 datas so it displays the first letters of each string, in the div.

Roughly, I would like to make some like:

 {{app.user.Firstname.slice(0,2)}}{{app.user.Lastname.slice(0,2)}}

but I don't know how to implement JS or JQUERY into these things. I tried to attribute a script to the data, in vain

 {{ app.user.firstName, {'label_attr' : {'script' : `$("#sliced").slice(0,2);`} }}

It returns me a punctuation error even if I only try to attr a simple class.

Answer 1

No need to use JS. You just need to use the correct filter. You don't use . to access filters, you use the pipe (|).

<div>{{ app.user.Firstname|slice(0,2) }}{{ app.user.Lastname|slice(0,2) }}</div>

Which can also be expressed like this.

<div>{{ app.user.Firstname[:2] }}{{ app.user.Lastname[:2] }}</div>

Docs.