Button and Json

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.

[{"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

Hi, welcome to the forum.

You have only posted a debug node - so cant help you much with that.

Have you got the file reading part working?

You dont state what part?

Can I recommend you watch this playlist: Node-RED Essentials. 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.

Sorry :wink:

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;)

[{"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}]

So if I understand, you want to dynamically generate a dashboard page full of buttons, based on the contents of some JSON data?

Yes :wink:

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...

image

image

The flow...

[{"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":"<div>\n    <div ng-repeat=\"item in msg.payload\">\n        <md-button ng-click=\"send({payload:item})\">\n            {{item.id}}, {{item.menge}} / {{item.artikel}}\n        </md-button>\n    </div>\n</div>\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":580,"y":580,"wires":[["ba3b592a.446fc8"]]},{"id":"75b76f.0947b89","type":"inject","z":"db525c47.ab486","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":270,"y":580,"wires":[["c2e17c45.b22f7"]]},{"id":"ba3b592a.446fc8","type":"debug","z":"db525c47.ab486","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":730,"y":580,"wires":[]},{"id":"3dc35e31.466292","type":"ui_group","z":"","name":"Default","tab":"5132060d.4cde48","order":1,"disp":true,"width":"6","collapse":false},{"id":"5132060d.4cde48","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

oh thank you, i'm getting closer to my business, you really helped me a lot thank you thank you

lg ooscom

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}

:frowning:

[{"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}]

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.

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,

Bildschirmfoto 2020-08-17 um 10.00.20