# How can i pass array from flow to UI template

**URL:** <https://discourse.nodered.org/t/how-can-i-pass-array-from-flow-to-ui-template/38991>\
**Category:** Dashboard\
**Created:** [12 January 2021 10:01 UTC](https://discourse.nodered.org/t/how-can-i-pass-array-from-flow-to-ui-template/38991 "2021-01-12T10:01:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![YT2310](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yt2310/32/35255_2.png) [@YT2310](https://discourse.nodered.org/u/YT2310)\
**Post date:** [12 January 2021 10:01 UTC](https://discourse.nodered.org/t/how-can-i-pass-array-from-flow-to-ui-template/38991/1 "2021-01-12T10:01:14Z")

</div>

Hey there,

I use a template node to generate a table in my dashboard. The msg.payload is prepared by me beforehand as a string (see pic 1 right side). The html source text for the table is contained in the string. I do that because the length of the table and its content depends on a SQL selection. It works the way it is.

 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c5ffd31a78ae766ab1c8021ef7be878d3907c978.png)

I'm just wondering if there isn't a better / more elegant solution to achieve the same result. So I started to try to transfer the data array from the database to the ui template. Unfortunately this has been unsuccessful until now. Can someone help me with the problem or has experience with it?

 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/49c9ebe0397d57c71e4eb326da4fcff65ca8b67b.png)

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [12 January 2021 10:06 UTC](https://discourse.nodered.org/t/how-can-i-pass-array-from-flow-to-ui-template/38991/2 "2021-01-12T10:06:28Z")

</div>

Yes, there is a more elegant solution. 😀

First, you don't need to put a complete HTML page into the template node, just the elements you want to display.

For the table you can use standard Angular directives, like `ng-repeat`. Here's an example of a simple table displaying an array of event objects.

This is the sole content of the ui-template node:

```auto
<table class="table">
    <tr>
        <th style="width:10em;">Time</th>
        <th>Message</th>
    </tr>
    <tr ng-repeat="event in msg.payload">
        <td>{{::event.timestamp | date:'MM-dd HH:mm:ss'}}</td>
        <td>{{::event.message}}</td>
    </tr>
</table>

```

The template node should be fed with the actual data, not a HTML string. So just pass your message with the payload set to an array of objects.

---

<div class="post-metadata">

**Author:** ![YT2310](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yt2310/32/35255_2.png) [@YT2310](https://discourse.nodered.org/u/YT2310)\
**Post date:** [12 January 2021 10:28 UTC](https://discourse.nodered.org/t/how-can-i-pass-array-from-flow-to-ui-template/38991/3 "2021-01-12T10:28:12Z")

</div>

crazy! 😃  
thank you, that will make the code much more elegant!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 January 2021 10:28 UTC](https://discourse.nodered.org/t/how-can-i-pass-array-from-flow-to-ui-template/38991/4 "2021-01-26T10:28:20Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.