How to pass dynamic data to javascript funtion using Liquid?

Question

In Dynamics-365 customer portal site, i created a web page which basically will show all assets-installed in a grid under a customer account.

For that, i created a entity-list which has 6 views to render.

For some objective purpose, i need the columns names(which i am calculating in below given code) to be passed to the javascript funtion. If i change the view and click on the Download button then it should pass column names to the function.

But alas i am getting only Empty string everytime. Does there exists any way to solve this?

The skeleton of the page is like as below:

{% assign data = "" %}
{% assign columns = "" %} // columns will come from a dynamic configuration

{% entitylist id:page.adx_entitylist.id %}
    <div class="navbar navbar-default">
        <a href="#" title="Download" onclick="downloadAssets('{{data}}')" >Download</a>
    </div>
    <div>
        <ul class="dropdown-menu" role="menu">
            {% for view in entitylist.views -%}
                {% assign view_name = view.name | split: '-' %}
                <li{% if params.view == view.id %} class="active"{% endif %}>
                   <a href="{{ request.path | add_query:'view', view.id }}">{{view_name.last}}</a>
                </li>
            {% endfor -%}
        </ul>
    </div>

    {% entityview id:viewid, search:params.search, order:params.order, page:params.page, pagesize:params.pagesize, metafilter:params.mf %}
        {% assign data = "" %}
        {% for c in entityview.columns %}
            {% if columns contains c.logical_name %}
                {% assign data = data | append: c.logical_name %}
                <div> {{data}} </div>
            {% endif %}
        {% endfor %}
    {% endentityview %}
{% endentitylist %}

<script>
    function downloadAssets(data){
        console.log(data);
    }
</script>

Answer 1

I don't know Liquid but may be this snippet of code could help you. I did retrieve the column metadata in one of my project. One of the difficulty was the find the object containing the translation:

_self._getColumnLocalization = function (entityType, columnName) {
                var result = null;
                var req = new XMLHttpRequest();
                req.open("GET", '../../../api/data/v8.2/EntityDefinitions(LogicalName=%27' + entityType + '%27)?$select=Attributes&$expand=Attributes($select=DisplayName;$filter=LogicalName%20eq%20%27' + columnName + '%27)', false);
                req.setRequestHeader("Accept", "application/json");
                req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
                req.setRequestHeader("OData-MaxVersion", "4.0");
                req.setRequestHeader("OData-Version", "4.0");
                req.setRequestHeader("Prefer", "odata.include-annotations=\"OData.Community.Display.V1.FormattedValue\"");
                req.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        req.onreadystatechange = null;
                        if (this.status == 200) {
                            if (this.response) {
                                result = JSON.parse(this.response);
                            }
                        }
                        //else if (this.status == 204) {
                        //    // Everything then well
                        //}
                        else {
                            alert('Error: ConsumeAPI');
                        }
                    }
                };
                req.send();
                if (result.Attributes.length == 0) {
                    return null;
                }
                else {
                    return result.Attributes[0].DisplayName.UserLocalizedLabel.Label;
                }
            };

Answer 2

Try this instead:

...href="#" title="Download" id="downloadButton">Download ...

<script type="text/javascript">
$("a#downloadButton").click(function() {
downloadAssets({{data}});
});

function downloadAssets(myData){
//here the logic to download the data; 
}
</script>