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

[greg.rossi]

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.

[anon68878319]

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:

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