# JSON array vars in template (HTML)

**URL:** https://discourse.nodered.org/t/json-array-vars-in-template-html/55633
**Category:** Dashboard
**Tags:** database
**Created:** [23 December 2021 21:15 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633 "2021-12-23T21:15:07Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)
#### Post date: [23 December 2021 21:15 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633/1 "2021-12-23T21:15:07Z")

</div>

I know this is not strictly a NR question however I've spent a LOT of time searching without luck. Hopefully this query will help others too. I am not strong at all with HTML I'd be pleased to be pointed somewhere to learn how to specifically do this as well.

I have a JSON array (context.monthly\_stats\_array) that is updated nightly that has records that look like this:

```auto
monthly_stats_array[1] = ({ name: 'Jan', samples: 0, dl_total: 0, dl_avg: 0, sct_total: 0, sct_avg: 0, hct_total: 0, hct_avg: 0});
monthly_stats_array[2] = ({ name: 'Feb', samples: 0, dl_total: 0, dl_avg: 0, sct_total: 0, sct_avg: 0, hct_total: 0, hct_avg: 0 });
monthly_stats_array[3] = ({ name: 'Mar', samples: 0, dl_total: 0, dl_avg: 0, sct_total: 0, sct_avg: 0, hct_total: 0, hct_avg: 0 });

```

I have created a table in a dashboard template that looks like this (numbers shown are static):

 ![Monthly Table](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/d/8d904ffeb92ca60ac8ecfa028785a31730691b7c.jpeg)

My question is how do I get the JSON array objects (such as "_samples_" or "_dl\_avg_") into the HTML code of the dashboard template so that I can display them as they get changed?  
TIA  
st

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [23 December 2021 21:55 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633/2 "2021-12-23T21:55:26Z")

</div>

~~Here is an example, hope it helps. you can add the style etc.~~

Can you not just resend the change object?

```auto
[{"id":"1f719cb3.b3e5e3","type":"inject","z":"c791cbc0.84f648","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[\t {\t \"name\":\"Jan\",\t \"samples\":0,\t \"dl_total\":$round($random()*10),\t \"dl_avg\":0,\t \"sct_total\":0,\t \"sct_avg\":$round($random()*10),\t \"hct_total\":0,\t \"hct_avg\":$round($random()*10)\t },\t {\t \"name\":\"Feb\",\t \"samples\":0,\t \"dl_total\":$round($random()*10),\t \"dl_avg\":0,\t \"sct_total\":0,\t \"sct_avg\":$round($random()*10),\t \"hct_total\":0,\t \"hct_avg\":0\t },\t {\t \"name\":\"Mar\",\t \"samples\":0,\t \"dl_total\":0,\t \"dl_avg\":0,\t \"sct_total\":0,\t \"sct_avg\":0,\t \"hct_total\":0,\t \"hct_avg\":0\t }\t]","payloadType":"jsonata","x":140,"y":1980,"wires":[["4f961563.a5eacc"]]},{"id":"4f961563.a5eacc","type":"ui_template","z":"c791cbc0.84f648","group":"8b5cde76.edd58","name":"","order":9,"width":0,"height":0,"format":"<table>\n <tbody>\n <tr ng-repeat=\"(key, value) in msg.payload[0]\">\n <td>{{key}}</td>\n <td ng-repeat=\"element in msg.payload\">{{msg.payload[$index][key]}}</td>\n </tr>\n </tbody>\n</table>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":300,"y":2080,"wires":[["da13de5e.8621a"]]},{"id":"da13de5e.8621a","type":"debug","z":"c791cbc0.84f648","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":650,"y":2020,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)
#### Post date: [23 December 2021 22:29 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633/3 "2021-12-23T22:29:57Z")

</div>

My challenge was knowing how to pass the array values into the HTML code in the first place, I think what you have provided will help ... I'll try and let you know.

Thanks so much.

---

<div class="post-metadata">

### Author: ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)
#### Post date: [24 December 2021 11:32 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633/4 "2021-12-24T11:32:56Z")

</div>

Well, while the solution you provided is some nice code it doesn't help me because:

- it uses msg.payload as the data source rather then using a context.array in memory
- it blindly pushes every array element into the output and does not parse out only the ones I require
- the output is not very elegant

I'm looking to capture particular array elements and then plug them into the table like this:

```auto
var data1 = array[12].dl_avg;
var data2 = array{12}.sct_avg

<td> data1 </td>
<td> data2 </td>

```

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [24 December 2021 11:57 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633/5 "2021-12-24T11:57:57Z")

</div>

1 It is an example, you would need to edit for your use  
2 You can change payload to any property you wish including context. Or simplly move context to payload.  
3 You can prepare the data the you feed it by removing unwanted properties.  
4 Again it is an example you can add css to the table to style. You supplied no html of table for styling(and thats not my job)  
5 do some reading

> **[JSONata Documentation · JSONata](https://docs.jsonata.org/overview.html)**
>
> \## Introduction

> **[AngularJS](https://docs.angularjs.org/api/ng/directive/ngRepeat#iterating-over-object-properties)**
>
> AngularJS is what HTML would have been, had it been designed for building web-apps.
> Declarative templates with data-binding, MVC, dependency injection and great
> testability story all implemented with pure client-side...

> **[CSS Styling Tables](https://www.w3schools.com/css/css_table.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

```auto
[{"id":"3d042cad.39bbf4","type":"inject","z":"c791cbc0.84f648","name":"","props":[{"p":"some_property_or_context","v":"[\t {\t \"name\":\"Jan\",\t \"samples\":0,\t \"dl_total\":$round($random()*10),\t \"dl_avg\":0,\t \"sct_total\":0,\t \"sct_avg\":$round($random()*10),\t \"hct_total\":0,\t \"hct_avg\":$round($random()*10)\t },\t {\t \"name\":\"Feb\",\t \"samples\":0,\t \"dl_total\":$round($random()*10),\t \"dl_avg\":0,\t \"sct_total\":0,\t \"sct_avg\":$round($random()*10),\t \"hct_total\":0,\t \"hct_avg\":0\t },\t {\t \"name\":\"Mar\",\t \"samples\":0,\t \"dl_total\":0,\t \"dl_avg\":0,\t \"sct_total\":0,\t \"sct_avg\":0,\t \"hct_total\":0,\t \"hct_avg\":0\t }\t]","vt":"jsonata"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":110,"y":1340,"wires":[["9f7f71b1.37aa08"]]},{"id":"9f7f71b1.37aa08","type":"change","z":"c791cbc0.84f648","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$$.some_property_or_context.{\"a _name\": $.name,\t \"another name\": $.samples, \"a third name\": $.dl_total}","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":220,"y":1380,"wires":[["f0c13732.7afb3"]]},{"id":"f0c13732.7afb3","type":"ui_template","z":"c791cbc0.84f648","group":"8b5cde76.edd58","name":"","order":9,"width":0,"height":0,"format":"<table>\n <tbody>\n <tr ng-repeat=\"(key, value) in msg.payload[0]\">\n <td>{{key}}</td>\n <td ng-repeat=\"element in msg.payload\">{{msg.payload[$index][key]}}</td>\n </tr>\n </tbody>\n</table>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":410,"y":1420,"wires":[["5bee78ba.7559c8"]]},{"id":"5bee78ba.7559c8","type":"debug","z":"c791cbc0.84f648","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":590,"y":1380,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)
#### Post date: [24 December 2021 14:37 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633/6 "2021-12-24T14:37:02Z")

</div>

> I've spent a LOT of time searching without luck. I am not strong at all with HTML

Over my lifetime I've learned the following programming languages:

```auto
fortran
basic
pascal
D-base 3+
Clipper
C (minimally, early 90's)
javascript
arduino (C-ish)
python (to a good degree)

MS-DOS O/S CLI commands
LINUX O/S CLI commands

```

and of course figured out how to use CSS and moustach.

I'm really NOT interested in fully learning another language, especially HTML (until I have a LOT of use for it) and I do successfully solve the majority of my challenges on my own, only reaching out when stuck.

Forgive me if, for a simple, single task, I chose to look for someone friendly that might help me out.

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [24 December 2021 15:00 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633/7 "2021-12-24T15:00:56Z")

</div>

I showed you how to enter array into table, was it not friendly the help i offered?  
I showed you how to edit data using change node and Jsonata. You state you learnt JS, so you could also use that instead.  
To display tables with styling you will need to learn html and css, at least for tables.  
I offered you some reading that should help.  
I never said you need to fully learn another language.  
Looking at your topics for help, I see you never let other users know you received/found a solution.

Good luck with you endeavours, Hope you find friendlier help.

---

<div class="post-metadata">

### Author: ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)
#### Post date: [24 December 2021 15:53 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633/8 "2021-12-24T15:53:03Z")

</div>

Yes, of course. Thank you.

---

<div class="post-metadata">

### Author: ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)
#### Post date: [25 December 2021 15:16 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633/9 "2021-12-25T15:16:22Z")

</div>

`E1cid`

I have it solved now however first, allow me to provide some background.

I see now that your initial response was very helpful, but I didn't understand that at the time. This was because I could not comprehend the code you provided ... at all. I looked at it and thought "What is `ng`, and why would you `repeat` it? How can you enter (what appeared to be) plain text in that command and have it interpreted into what you seek? And where does `$Index` just pop up from? How does it loop when it doesn't look anything like a loop command?"

Then I found out about **angular** (odd name to me, I'm just gonna guess some guy named Angus Angular started it). I researched angular and `ng-repeat` for some time with my initial read helping some but the explanation and use left me confused. The examples of use (which help me learn best) seemed lacking (for me).

Anyway ...

After reading and re-reading (about angular, different commands and ng-repeat), I started to slowly get it. Then, after significant trial and error, I got it to work (last night). Here is an extract of the code:

```auto
  <tr style="height:40px; font-size:20px; text-align:center;">
      <td>Days of Data</td>
      <td <td ng-repeat="elements in msg.payload">{{msg.payload[$index].samples}}</td>
  </tr>
  <tr style="height:40px; font-size:20px; text-align:center";">
      <td>Available Light</td>
      <td <td ng-repeat="elements in msg.payload">{{msg.payload[$index].dl_avg}}</td>
  </tr>

```

So I thank you for your assistance, you clearly have command of HTML (and angular). I'd also like to offer (and please read this in the helpful manner I intend it) that "_Here is some helpful reading_" works better for me. I think that is because too often in forums (that are places where people are supposed to go for assistance, what else is a forum for?), I see the 'club' of "do some reading" used early and alot (perhaps I'm overly sensitive to it) and I'm willing to bet that most (like me) believe we've already tried that.

Again, thanks very much.

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [26 December 2021 02:13 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633/10 "2021-12-26T02:13:35Z")

</div>

Cool glad you came to a solution. I would point out that my second example showed you how to change the object property name to ones you wanted to use in the table. so you could of just use an example like below

Html tr and td have been given class elements so css can target them

```auto
<style>
table {
    width:100%;
    background-color: white;
    text-align: center;
}
td {
    color: white;
    height:40px;
    font-size:20px; 
}
td[class^=mytablerowstart] {
    background-color: black;
}
td.mytablerowstart0 {
    background-color: white;
}
tr[class^=mytablerow] {
    background-color: blue ;
    font-weight: bold;
}
tr.mytablerow0 {
    background-color: black ;
    font-weight: bold;
}
</style>
<table class="mytable">
    <tbody>
      <tr class="mytablerow{{$index}}" ng-repeat="(key, value) in msg.payload[0]">
        <td class="mytablerowstart{{$index}}">{{key}}</td>
        <td class="mytabledata" ng-repeat="element in msg.payload">{{msg.payload[$index][key]}}</td>
      </tr>
    </tbody>
</table>

```

The incoming data is then parse with the following JSONata, giving the row titles to

```auto
$$.some_property_or_context.{
   "": $.name,
   "Days of Data": $.samples,
   "Available Light": $.dl_avg
}

```

the flow json

```auto
[{"id":"3d042cad.39bbf4","type":"inject","z":"c791cbc0.84f648","name":"","props":[{"p":"some_property_or_context","v":"[\t {\t \"name\":\"Jan\",\t \"samples\":$round($random()*10),\t \"dl_total\":0,\t \"dl_avg\":$round($random()*10),\t \"sct_total\":0,\t \"sct_avg\":$round($random()*10),\t \"hct_total\":0,\t \"hct_avg\":$round($random()*10)\t },\t {\t \"name\":\"Feb\",\t \"samples\":$round($random()*10),\t \"dl_total\":$round($random()*10),\t \"dl_avg\":$round($random()*10),\t \"sct_total\":0,\t \"sct_avg\":$round($random()*10),\t \"hct_total\":0,\t \"hct_avg\":0\t },\t {\t \"name\":\"Mar\",\t \"samples\":$round($random()*10),\t \"dl_total\":0,\t \"dl_avg\":$round($random()*10),\t \"sct_total\":0,\t \"sct_avg\":0,\t \"hct_total\":0,\t \"hct_avg\":0\t }\t]","vt":"jsonata"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":110,"y":1340,"wires":[["9f7f71b1.37aa08"]]},{"id":"9f7f71b1.37aa08","type":"change","z":"c791cbc0.84f648","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$$.some_property_or_context.{\t \"\": $.name,\t \"Days of Data\": $.samples,\t \"Available Light\": $.dl_avg\t}","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":220,"y":1380,"wires":[["f0c13732.7afb3"]]},{"id":"f0c13732.7afb3","type":"ui_template","z":"c791cbc0.84f648","group":"d18ff8e1.9e1118","name":"","order":9,"width":"0","height":"0","format":"<style>\ntable {\n width:100%;\n background-color: white;\n text-align: center;\n}\ntd {\n color: white;\n height:40px;\n font-size:20px; \n}\ntd[class^=mytablerowstart] {\n background-color: black;\n}\ntd.mytablerowstart0 {\n background-color: white;\n}\ntr[class^=mytablerow] {\n background-color: blue ;\n font-weight: bold;\n}\ntr.mytablerow0 {\n background-color: black ;\n font-weight: bold;\n}\n</style>\n<table class=\"mytable\">\n <tbody>\n <tr class=\"mytablerow{{$index}}\" ng-repeat=\"(key, value) in msg.payload[0]\">\n <td class=\"mytablerowstart{{$index}}\">{{key}}</td>\n <td class=\"mytabledata\" ng-repeat=\"element in msg.payload\">{{msg.payload[$index][key]}}</td>\n </tr>\n </tbody>\n</table>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":410,"y":1420,"wires":[["5bee78ba.7559c8"]]},{"id":"5bee78ba.7559c8","type":"debug","z":"c791cbc0.84f648","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":590,"y":1380,"wires":[]},{"id":"d18ff8e1.9e1118","type":"ui_group","name":"Default","tab":"27c60ea2.a80aaa","order":1,"disp":true,"width":"12","collapse":false},{"id":"27c60ea2.a80aaa","type":"ui_tab","name":"test","icon":"dashboard","disabled":false,"hidden":false}]

```

The out come

 ![Screenshot_20211226-021636](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/b/fb820ef8255a89462902a0c8ccb50db75d45c956.png)

Apologies if my mannerisms caused you to take offense, that was not my intention. I will leave it there.

You should of asked what $index was and where it came from i would have offered an explanation.

---

<div class="post-metadata">

### Author: ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)
#### Post date: [27 December 2021 15:31 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633/11 "2021-12-27T15:31:55Z")

</div>

Q: If I have an array where array[0] contains data I wish not included, can `ng-repeat` be instructed to start at array[1], looking then only at elements [1] to [7] (of [8] elements), just those values?

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [27 December 2021 16:49 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633/12 "2021-12-27T16:49:20Z")

</div>

> **[Angular limitTo Filter](https://www.w3schools.com/angular/ng_filter_limitto.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

---

<div class="post-metadata">

### Author: ![StrongTown](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@StrongTown](https://discourse.nodered.org/u/StrongTown)
#### Post date: [27 December 2021 19:04 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633/13 "2021-12-27T19:04:11Z")

</div>

Excellent. Thanks

---

<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 2022 19:04 UTC](https://discourse.nodered.org/t/json-array-vars-in-template-html/55633/14 "2022-01-26T19:04:30Z")

</div>

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