# Display results from SQL query in a HTML table?

**URL:** <https://discourse.nodered.org/t/display-results-from-sql-query-in-a-html-table/74672>\
**Category:** General\
**Created:** [3 February 2023 17:58 UTC](https://discourse.nodered.org/t/display-results-from-sql-query-in-a-html-table/74672 "2023-02-03T17:58:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)\
**Post date:** [3 February 2023 17:58 UTC](https://discourse.nodered.org/t/display-results-from-sql-query-in-a-html-table/74672/1 "2023-02-03T17:58:55Z")

</div>

Using `node-red-node-mysql`, how do I go on about displaying query results in a HTML table using a **template node and HTTP Response node** (not Node-RED dashboard/UI)?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [3 February 2023 18:20 UTC](https://discourse.nodered.org/t/display-results-from-sql-query-in-a-html-table/74672/2 "2023-02-03T18:20:41Z")

</div>

You will need to convert the returned JSON to an HTML table. You can use the template node to help. The template node uses Mustache templating so that you can do loops to get the content into the HTML tags you need.

If you need more interaction between Node-RED and your front-end, you might also want to look at uibuilder. In fact the next release v6.1.0 branch of uibuilder has a node that will convert from input arrays/objects direct to HTML tables via a standardised configuration data format. you send the converted data to a uibuilder node and the uibuilder client library hydrates it into HTML.

In v6.2 of uibuilder, The hydration code will also be made available in a new node so that you could do:

```auto
sql query
  -> uib-element (set to produce a table)
    -> uib-html (set to output HTML)
      -> http-out

```

There will also be a `uib-save` node that can take the HTML and save it to a file in the right uibuilder instance folder which, if you only need to update the query periodically, would be super efficient since the last result would be loaded as a static file. The static file would be updated when you re-run the query.

---

<div class="post-metadata">

**Author:** ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)\
**Post date:** [3 February 2023 18:56 UTC](https://discourse.nodered.org/t/display-results-from-sql-query-in-a-html-table/74672/3 "2023-02-03T18:56:39Z")

</div>

> [@TotallyInformation](#):
>
> You will need to convert the returned JSON to an HTML table. You can use the template node to help. The template node uses Mustache templating so that you can do loops to get the content into the HTML tags you need.

Can you point me in the right direction to do that?

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [3 February 2023 19:17 UTC](https://discourse.nodered.org/t/display-results-from-sql-query-in-a-html-table/74672/4 "2023-02-03T19:17:24Z")

</div>

Hi @network_potato

As this is not dashboard driven - you will need to develop the "engine" your self.

Here is the gist (in writing)

`HTTP IN` -\> Your `SQL Query` -\> `Template Node` -\> `HTTP RESPONSE`

Putting that into a flow?  
NOTE: I have substituted the SQL Node for a function node (I don't use SQL in Node RED)

 ![Screenshot 2023-02-03 at 19.04.05](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/9/d940573a834d4f6b88438a45da5e262a7746eb16.png)

As for the `template` Node, this is nothing more than markup mixed with the `msg` object  
The example below will list names in an html `<ul>` element.

**My payload:**

```auto
{
    payload: ["Node", "Red"]
}

```

**My template**

```plaintext
<ul>
  {{#payload}}
  <li>{{.}}</li>
  {{/payload}}
</ul>

```

**Output** (sent as `payload` to the HTTP Response Node)

```plaintext
<ul>
  <li>Node</li>
  <li>RED</li>
</ul>

```

using only these components , you can achive your goal.  
BUT a read up on `mustache` (the template engine) is recommended.

> **[GitHub - janl/mustache.js: Minimal templating with {{mustaches}} in JavaScript](https://github.com/janl/mustache.js/)**
>
> Minimal templating with {{mustaches}} in JavaScript - GitHub - janl/mustache.js: Minimal templating with {{mustaches}} in JavaScript

---

<div class="post-metadata">

**Author:** ![network\_potato](https://avatars.discourse-cdn.com/v4/letter/n/59ef9b/32.png) [@network\_potato](https://discourse.nodered.org/u/network_potato)\
**Post date:** [3 February 2023 19:21 UTC](https://discourse.nodered.org/t/display-results-from-sql-query-in-a-html-table/74672/5 "2023-02-03T19:21:18Z")

</div>

Thanks! I managed to achieve my goal with this code:

> <https://github.com/divanov11/json-html-table/blob/master/jsontable.html>

Converting the SQL query payload to JSON and then putting {{{payload}}} inside `var myArray`

---

<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:** [4 April 2023 19:21 UTC](https://discourse.nodered.org/t/display-results-from-sql-query-in-a-html-table/74672/6 "2023-04-04T19:21:54Z")

</div>

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