# The script part of the HTML statement in the template component, how to reference the data from the previous node

**URL:** <https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848>\
**Category:** General\
**Created:** [11 December 2024 08:31 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848 "2024-12-11T08:31:08Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![uuuape](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/uuuape/32/97113_2.png) [@uuuape](https://discourse.nodered.org/u/uuuape)\
**Post date:** [11 December 2024 08:31 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848/1 "2024-12-11T08:31:08Z")

</div>

Hello, I built a template component and wrote the HTML content for generating the table, but in the script section, I couldn't reference the data from the previous node. Once I add a reference, the HTML page has no content to display. How Do I fix the previous node payload reference?

Output a payload at the preceding node:

```auto
[{“Msg”: “Item 1 point”, “Shuliang”: “1”, “Jine”: “1”} , {“Msg”: “Meat bun”, “Shuliang”: “1”, “Jine”: “2”}]

```

template Content：

```auto

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>数据表格</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
            margin: 20px auto;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>物品名称</th>
                <th>数量</th>
                <th>金额</th>
            </tr>
        </thead>
        <tbody>
            <!-- 数据行将在这里插入 -->
        </tbody>
    </table>

    <script>
        var data = [{"msg":"物品1点","shuliang":"1","jine":"1"},{"msg":"肉夹馍","shuliang":"1","jine":"2"}];

       **// var data = {{payload.gouhuodanwei}};**
 **//Once I changed to this command, there was nothing to show on my table page**

        var tbody = document.querySelector('tbody');
        var oo = 0;

     

        data.forEach(item => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${item.msg}</td>
                <td>${item.shuliang}</td>
                <td>${item.jine}</td>
            `;
            tbody.appendChild(tr);
        });
    </script>
</body>

</html>

```

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [11 December 2024 08:57 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848/2 "2024-12-11T08:57:00Z")

</div>

Change the template to be a mustache template

 ![Screenshot 2024-12-11 at 09.54.11](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/a/9ae9c38c2c8b32dff63b42009dcf9199a2ecc93c.png)

You can then use [mustache syntax](https://mustache.github.io/mustache.5.html) inside your template, e.g. `{{ Msg }}` & `{{ Shuliang }}` ... etc and with that you can reference the data in the msg object.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [11 December 2024 08:58 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848/3 "2024-12-11T08:58:43Z")

</div>

> [@uuuape](#):
>
> ` **// var data = {{payload.gouhuodanwei}};** `

Oh I see that you're already using mustache, so perhaps you're not using mustache template.

---

<div class="post-metadata">

**Author:** ![uuuape](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/uuuape/32/97113_2.png) [@uuuape](https://discourse.nodered.org/u/uuuape)\
**Post date:** [11 December 2024 09:09 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848/4 "2024-12-11T09:09:57Z")

</div>

“Mustache Template” is the setting I use now

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 December 2024 09:13 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848/5 "2024-12-11T09:13:16Z")

</div>

Is the payload property definitely in the msg? Use a debug before to confirm it is present and correct.

Also, as per built in docs, try using `{{{ xxx }}}` triple curly braces (that tells the node not to escape content)

Also, add a debug node after the template to see how your data is being rendered!

---

<div class="post-metadata">

**Author:** ![uuuape](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/uuuape/32/97113_2.png) [@uuuape](https://discourse.nodered.org/u/uuuape)\
**Post date:** [11 December 2024 09:18 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848/6 "2024-12-11T09:18:22Z")

</div>

1. I used the format {{{ XX }}} , and it still has no effect
2. The output from a node on the template I have the debug node to make sure that the data is delivered to the template

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 December 2024 09:20 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848/7 "2024-12-11T09:20:05Z")

</div>

> [@uuuape](#):
>
> The output from a node on the template I have the debug node to make sure that the data is delivered to the template

And does it look right? Show us!

---

<div class="post-metadata">

**Author:** ![uuuape](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/uuuape/32/97113_2.png) [@uuuape](https://discourse.nodered.org/u/uuuape)\
**Post date:** [11 December 2024 09:34 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848/8 "2024-12-11T09:34:51Z")

</div>

![5466](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/d/3dcb5216917dc6477f81c6e3945776b620340f32.png)  
 ![21313](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/5/45fc45afc3bb1435459bf878d20ae5b3b0a270cb.png)

Please check if I have any mistakes

---

<div class="post-metadata">

**Author:** ![uuuape](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/uuuape/32/97113_2.png) [@uuuape](https://discourse.nodered.org/u/uuuape)\
**Post date:** [11 December 2024 09:36 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848/9 "2024-12-11T09:36:45Z")

</div>

![32432](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/f/5f29f1e420ed9f1e0cc4ea766fa8860db1bba104.png)

this is another picture。

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 December 2024 09:53 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848/10 "2024-12-11T09:53:10Z")

</div>

> [@Steve-Mcl](#):
>
> add a debug node after the template

You need to add the debug AFTER the template so we can see the results of the mustache rendering.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [11 December 2024 09:54 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848/11 "2024-12-11T09:54:52Z")

</div>

> [@uuuape](#):
>
> this is another picture。

could you perhaps provide a copy of the [flow](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506) your using?

---

<div class="post-metadata">

**Author:** ![uuuape](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/uuuape/32/97113_2.png) [@uuuape](https://discourse.nodered.org/u/uuuape)\
**Post date:** [11 December 2024 10:52 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848/12 "2024-12-11T10:52:15Z")

</div>

![002](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5ede5ff657f48bb3b5c678306c6994efe1a96312.png)  
I've found the problem because the payload that came in has a format error. Thank you

---

<div class="post-metadata">

**Author:** ![uuuape](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/uuuape/32/97113_2.png) [@uuuape](https://discourse.nodered.org/u/uuuape)\
**Post date:** [11 December 2024 11:42 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848/13 "2024-12-11T11:42:40Z")

</div>

I've found the problem because the payload that came in has a format error. Thank you

---

<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:** [25 December 2024 11:43 UTC](https://discourse.nodered.org/t/the-script-part-of-the-html-statement-in-the-template-component-how-to-reference-the-data-from-the-previous-node/93848/14 "2024-12-25T11:43:11Z")

</div>

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