How to Remove Quotes and Brackets when binding data in HTML with Angular?

In Custom Portal, one can use angular in html and markdown blocks to bind data from a query. Here is a simple example of getting SUM(Sales) in an html block after adding the query to the block
<h1>Data:</h1> <p>Total Sales: {{data}}</p>

However, you will notice that the data on the front end may have quotes and/or brackets around it:

To remove these, you need to use javascript to convert the data to a string:
<h1>Data:</h1> <p>Total Sales: {{data.toString()}}</p>

Notice the .toString() added to the data.

1 Like

To expand on this a little bit, here’s an example Custom Portal HTML block that uses data from a SQL query and Angular in the HTML.

Here’s the final result:


Here’s the query tab of the block:

Here are the results of the query:

Here’s the HTML:

    <p>Total Sales: {{data.toString()}}</p>
        <th ng-repeat="column in columns">{{column}}</th>
      <tr ng-repeat="row in data">
        <td ng-repeat="column in row">{{column}}</td>