Skip to main content

Notifications

Community site session details

Community site session details

Session Id : fQDfDZOdNmDIep5rc0S7wZ
Power Pages - General Discussions
Unanswered

Use Liquid Variable (generated in html) to javascript

Like (0) ShareShare
ReportReport
Posted on 5 Jul 2023 14:48:06 by 10
Hello!
I am building a Power Page and I need to reference in my Javascript (advanced web page options) a variable generated in Liquid code in the HTML.
 
HTML code (liquid)
 
{% fetchxml articles_search %}
      <fetch version= "1.0" output-format= "xml-platform" mapping="logical" distinct="false" no-lock="true" >
  <entity name="knowledgearticle">
    <attribute name="title" alias="titulo_articulo" />
    <attribute name="content" alias="contenido_articulo" />
    <attribute name="knowledgearticleid" alias="id_articulo" />
  </entity>
</fetch>
{% endfetchxml %}
 
{% assign articles_for_search = articles_search.results.entities %}
 
<script type="text/javascript">
var articles_for_searching = {{articles_for_search|json}};
</script>
 
 
Javascript code
 
inputSearch.onkeyup = e => {
let userData = e.target.value;
let emptyArray = [];
 
if (userData) {
emptyArray = articles_for_searching.filter(data => {
return data
.toLocaleLowerCase()
.startsWith(userData.toLocaleLowerCase());
});
        console.log(emptyArray)
        }}
 
 
But when I test the page running the console.log, I get the following error:
Juanse_1-1688568224209.png

 

I need to call the variable in js somehow or what am I doing wrong?
 
Thanks!
Categories:
  • Lucas001 Profile Picture
    2,143 Super User 2025 Season 1 on 06 Jul 2023 at 06:14:43
    Re: Use Liquid Variable (generated in html) to javascript

    Hi @Juanse,

     

    from what I see the problem relies in the line:

    var articles_for_searching = {{articles_for_search|json}};

    What happens if you just console log after that line?

     

    I usually use a webteamplate on another page to fetch the XML and refer to that page from whereever I want to use the JSON data.

    You can reference the text from the website containing only JSON and use JSON.parse() to afterwards further manipulate it.

    {% fetchxml YourEntity %}
    <fetch>
     <entity name="YourEntityName">
     <attribute name="Attr1" />
     <attribute name="Attr2" /> 
     </entity>
    </fetch>
    {% endfetchxml %}
    
    <!-- Creating a JSON Element -->
    [
    {% for item in YourEntity.results.entities %}
     {
     "id": "{{ item.id }}",
     "name": "{{ item.name }}"
     }{% unless forloop.last %}, {% endunless %}
    {% endfor %}
    ]

     

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Understanding Microsoft Agents - Introductory Session

Confused about how agents work across the Microsoft ecosystem? Register today!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Congratulations to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard > Power Pages - General Discussions

#1
WarrenBelz Profile Picture

WarrenBelz 9 Most Valuable Professional

#2
Rondel Profile Picture

Rondel 6

#3
oliver.rodrigues Profile Picture

oliver.rodrigues 4 Most Valuable Professional

Overall leaderboard
Loading started