How to Build a Web Page in Node-RED Using JSON Data
This guide walks through designing a layout, configuring a Change node, creating a JSON payload, crafting an HTML template with Handlebars, deploying the flow, and accessing the generated page at http://127.0.0.1:1880/data, all within Node-RED.
The article demonstrates a step‑by‑step process for quickly constructing a web page that displays JSON data using Node‑RED.
1. Layout Design
An example layout image is shown to illustrate the desired page structure.
2. Edit the Change Node
The Change node is configured to set the message payload to a JSON string representing a person’s name and age.
3. JSON Data Source
{"name":"霸道的程序猿","age":30}4. Edit the HTML Template Node
The HTML node uses Handlebars syntax to inject the JSON fields into the page.
<html>
<head>
<title>JSON Object</title>
</head>
<body>
<h1>姓名: {{payload.name}}</h1>
<h2>年齡: {{payload.age}}</h2>
</body>
</html>5. Deploy and Access
After deploying the flow, the page can be reached at http://127.0.0.1:1880/data. A screenshot of the rendered page is provided.
6. Full Flow JSON
The complete Node‑RED flow JSON is listed, showing nodes such as mqtt-broker, ui_group, ui_tab, theme settings, the http in node at /data, the template node containing the HTML, and the change node that creates the JSON payload.
[
{"id":"f4a4d8eab7935bc8","type":"tab","label":"流程 3","disabled":false,"info":"","env":[]},
{"id":"c428312d1f6165d1","type":"mqtt-broker","name":"mqtt","broker":"127.0.0.1","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"sessionExpiry":""},
...
{"id":"a7f7e8","type":"http in","z":"f4a4d8eab7935bc8","url":"/data","method":"get","wires":[["7b94773d.12e1f8"]]},
{"id":"c8b16808.f5e888","type":"template","z":"f4a4d8eab7935bc8","name":"HTML网页","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>
<head>
<title>JSON Object</title>
</head>
<body>
<h1>姓名: {{payload.name}}</h1>
<h2>年齡: {{payload.age}}</h2>
</body>
</html>","output":"str","x":590,"y":180,"wires":[["aba2c9b4.da52c8"]]},
{"id":"7b94773d.12e1f8","type":"change","z":"f4a4d8eab7935bc8","name":"JSON文件","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"name\":\"霸道的程序猿\",\"age\":30}","tot":"json"}],"x":430,"y":120,"wires":[["c8b16808.f5e888"]]},
{"id":"aba2c9b4.da52c8","type":"http response","z":"f4a4d8eab7935bc8","statusCode":"","headers":{},"x":730,"y":140,"wires":[]}
]By following these steps, users can rapidly create a Node‑RED dashboard page that renders JSON data without writing a separate server.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
The Dominant Programmer
Resources and tutorials for programmers' advanced learning journey. Advanced tracks in Java, Python, and C#. Blog: https://blog.csdn.net/badao_liumang_qizhi
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.