# Button and Json
**URL:** https://discourse.nodered.org/t/button-and-json/31609
**Category:** Dashboard
**Created:** [16 August 2020 13:31 UTC](https://discourse.nodered.org/t/button-and-json/31609 "2020-08-16T13:31:51Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@ooscom](https://discourse.nodered.org/u/ooscom)
#### Post date: [16 August 2020 13:31 UTC](https://discourse.nodered.org/t/button-and-json/31609/1 "2020-08-16T13:31:51Z")
Hello everybody,
I am completely new to the topic of node red and hope that I get nice help here.
I'm trying to read a Json file with a button and only output the specific part in a debug for later sending a mail.
```auto
[{"id":"ef540693.b4aca8","type":"debug","z":"ba097cdb.476aa8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":830,"y":280,"wires":[]}]
```
sorry for my bad english
LG ooscom
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [16 August 2020 13:42 UTC](https://discourse.nodered.org/t/button-and-json/31609/2 "2020-08-16T13:42:18Z")
Hi, welcome to the forum.
You have only posted a debug node - so cant help you much with that.
> [@ooscom](#):
>
> I'm trying to read a Json file with a button
Have you got the file reading part working?
> [@ooscom](#):
>
> and only output the specific part in a debug for later sending a mail
You dont state what part?
> [@ooscom](#):
>
> I am completely new to the topic of node red
Can I recommend you watch this playlist: [Node-RED Essentials](https://www.youtube.com/playlist?list=PLyNBB9VCLmo1hyO-4fIZ08gqFcXBkHy-6). It is by the developers of node-red. They're nice & short and to the point. You will understand a whole lot more in less than an hour. A small investment for a lot of gain.
---
### Author:  [@ooscom](https://discourse.nodered.org/u/ooscom)
#### Post date: [16 August 2020 13:56 UTC](https://discourse.nodered.org/t/button-and-json/31609/3 "2020-08-16T13:56:17Z")
Sorry 😉
As I said, I'm quite new to the topic of node red.
I would like to make a dashboard with 70 buttons, each button should be read from the json, button 1 = ID1 etc.
I watch Youtube;)
```auto
[{"id":"586af2ec.c5a924","type":"http request","z":"ba097cdb.476aa8","name":"","method":"GET","ret":"txt","paytoqs":false,"url":"https://ooscom.de/kanban/kanban.json","tls":"","persist":false,"proxy":"","authType":"","x":610,"y":280,"wires":[["ef540693.b4aca8"]]},{"id":"ef540693.b4aca8","type":"debug","z":"ba097cdb.476aa8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":830,"y":280,"wires":[]},{"id":"83a27642.07c8d8","type":"change","z":"ba097cdb.476aa8","name":"","rules":[{"t":"set","p":"post","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":200,"wires":[["586af2ec.c5a924"]]},{"id":"7f4b942a.88aba4","type":"trigger","z":"ba097cdb.476aa8","op1":"{\"t\":\"white\", \"b\":\"green\"}","op2":"{\"t\":\"white\", \"b\":\"orange\"}","op1type":"json","op2type":"json","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","name":"7.1","x":370,"y":260,"wires":[["d110f86e.aaceb8"]]},{"id":"d110f86e.aaceb8","type":"ui_button","z":"ba097cdb.476aa8","name":"7.1","group":"94700e28.8c1a2","order":1,"width":0,"height":0,"passthru":false,"label":"7.1","tooltip":"","color":"{{payload.t}} ","bgcolor":"{{payload.b}} ","icon":"","payload":"1","payloadType":"num","topic":"","x":370,"y":200,"wires":[["7f4b942a.88aba4","83a27642.07c8d8"]]},{"id":"94700e28.8c1a2","type":"ui_group","z":"","name":"Default","tab":"deea9971.23b3d8","order":1,"disp":true,"width":"6","collapse":false},{"id":"deea9971.23b3d8","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
```
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [16 August 2020 14:16 UTC](https://discourse.nodered.org/t/button-and-json/31609/4 "2020-08-16T14:16:41Z")
So if I understand, you want to dynamically generate a dashboard page full of buttons, based on the contents of some JSON data?
---
### Author:  [@ooscom](https://discourse.nodered.org/u/ooscom)
#### Post date: [16 August 2020 14:19 UTC](https://discourse.nodered.org/t/button-and-json/31609/5 "2020-08-16T14:19:14Z")
Yes 😉
I googled a lot but found nothing suitable
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [16 August 2020 14:44 UTC](https://discourse.nodered.org/t/button-and-json/31609/6 "2020-08-16T14:44:53Z")
> [@ooscom](#):
>
> I googled a lot but found nothing suitable
Not suprising - but then a search around angular ng-repeat or similar would get you close.
Here is one way...
The flow...
```auto
[{"id":"c2e17c45.b22f7","type":"http request","z":"db525c47.ab486","name":"","method":"GET","ret":"obj","paytoqs":false,"url":"https://ooscom.de/kanban/kanban.json","tls":"","persist":false,"proxy":"","authType":"","x":430,"y":580,"wires":[["223867a1.cf4318"]]},{"id":"223867a1.cf4318","type":"ui_template","z":"db525c47.ab486","group":"3dc35e31.466292","name":"","order":4,"width":"6","height":"12","format":"\n
\n \n {{item.id}}, {{item.menge}} / {{item.artikel}}\n \n
\n
### Author:  [@ooscom](https://discourse.nodered.org/u/ooscom)
#### Post date: [16 August 2020 14:59 UTC](https://discourse.nodered.org/t/button-and-json/31609/7 "2020-08-16T14:59:51Z")
oh thank you, i'm getting closer to my business, you really helped me a lot thank you thank you
lg ooscom
---
### Author:  [@ooscom](https://discourse.nodered.org/u/ooscom)
#### Post date: [17 August 2020 07:41 UTC](https://discourse.nodered.org/t/button-and-json/31609/8 "2020-08-17T07:41:03Z")
Hello,
I need help again
the first one works, i got it from a website, the second one with my json file not, he says in the debug that he can't find it? is it up to {post}
☹
```auto
[{"id":"449dcaf2.f9f5ec","type":"http request","z":"ba097cdb.476aa8","name":"","method":"GET","ret":"txt","paytoqs":false,"url":"https://jsonplaceholder.typicode.com/posts/{{post}}","tls":"","persist":false,"proxy":"","authType":"","x":510,"y":340,"wires":[["42283808.486d98"]]},{"id":"42283808.486d98","type":"debug","z":"ba097cdb.476aa8","name":"","active":true,"console":"false","complete":"payload","x":710,"y":340,"wires":[]},{"id":"2154a8c0.a0d62","type":"inject","z":"ba097cdb.476aa8","name":"post id","topic":"","payload":"2","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":110,"y":300,"wires":[["eaf3a59f.a53ab8"]]},{"id":"eaf3a59f.a53ab8","type":"change","z":"ba097cdb.476aa8","name":"","rules":[{"t":"set","p":"post","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":340,"wires":[["449dcaf2.f9f5ec"]]},{"id":"3c900eef.37d34a","type":"trigger","z":"ba097cdb.476aa8","op1":"{\"t\":\"white\", \"b\":\"green\"}","op2":"{\"t\":\"white\", \"b\":\"orange\"}","op1type":"json","op2type":"json","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","name":"2.1","x":110,"y":400,"wires":[["3950566.01a20aa"]]},{"id":"3950566.01a20aa","type":"ui_button","z":"ba097cdb.476aa8","name":"2.1","group":"b3e4173f.43e458","order":1,"width":0,"height":0,"passthru":true,"label":"2.1","tooltip":"","color":"{{payload.t}} ","bgcolor":"{{payload.b}} ","icon":"","payload":"1","payloadType":"str","topic":"","x":110,"y":340,"wires":[["3c900eef.37d34a","eaf3a59f.a53ab8"]]},{"id":"e5e564bb.4a4988","type":"http request","z":"ba097cdb.476aa8","name":"","method":"GET","ret":"txt","paytoqs":false,"url":"https://ooscom.de/kanban/kanban.json/{{post}}","tls":"","persist":false,"proxy":"","authType":"","x":510,"y":540,"wires":[["51141b48.b58fec"]]},{"id":"51141b48.b58fec","type":"debug","z":"ba097cdb.476aa8","name":"","active":true,"console":"false","complete":"payload","x":710,"y":540,"wires":[]},{"id":"89513c78.50a87","type":"inject","z":"ba097cdb.476aa8","name":"post id","topic":"","payload":"2","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":110,"y":500,"wires":[["ccc6ce8b.75ded8"]]},{"id":"ccc6ce8b.75ded8","type":"change","z":"ba097cdb.476aa8","name":"","rules":[{"t":"set","p":"post","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":540,"wires":[["e5e564bb.4a4988"]]},{"id":"30ba793b.88c7e6","type":"trigger","z":"ba097cdb.476aa8","op1":"{\"t\":\"white\", \"b\":\"green\"}","op2":"{\"t\":\"white\", \"b\":\"orange\"}","op1type":"json","op2type":"json","duration":"2","extend":false,"units":"s","reset":"","bytopic":"all","name":"2.1","x":110,"y":600,"wires":[["a66bc98e.a09a48"]]},{"id":"a66bc98e.a09a48","type":"ui_button","z":"ba097cdb.476aa8","name":"2.1","group":"b3e4173f.43e458","order":1,"width":0,"height":0,"passthru":true,"label":"2.1","tooltip":"","color":"{{payload.t}} ","bgcolor":"{{payload.b}} ","icon":"","payload":"1","payloadType":"str","topic":"","x":110,"y":540,"wires":[["30ba793b.88c7e6","ccc6ce8b.75ded8"]]},{"id":"b3e4173f.43e458","type":"ui_group","z":"","name":"Default","tab":"fc006c66.c8dc1","order":1,"disp":true,"width":"6","collapse":false},{"id":"fc006c66.c8dc1","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
```
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [17 August 2020 07:49 UTC](https://discourse.nodered.org/t/button-and-json/31609/9 "2020-08-17T07:49:34Z")
> [@ooscom](#):
>
> the second one with my json file not,
Your flow assembles a URL with `https://ooscom.de/kanban/kanban.json/{{post}}` where `post` is `2` - that makes `https://ooscom.de/kanban/kanban.json/2`
it wont work because there is nothing at `https://ooscom.de/kanban/kanban.json/2` - try it in your browser.
---
### Author:  [@ooscom](https://discourse.nodered.org/u/ooscom)
#### Post date: [17 August 2020 08:00 UTC](https://discourse.nodered.org/t/button-and-json/31609/10 "2020-08-17T08:00:34Z")
Ah okay,
Your solution is already going in the right direction, I would then have to adapt all buttons in the HTML / CCS code
it should look like this in the end ...
Mail,
