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:
[{“Msg”: “Item 1 point”, “Shuliang”: “1”, “Jine”: “1”} , {“Msg”: “Meat bun”, “Shuliang”: “1”, “Jine”: “2”}]
template Content:
<!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>