# Help with button { } input for JSON string

**URL:** <https://discourse.nodered.org/t/help-with-button-input-for-json-string/14185>\
**Category:** General\
**Created:** [10 August 2019 02:59 UTC](https://discourse.nodered.org/t/help-with-button-input-for-json-string/14185 "2019-08-10T02:59:35Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 August 2019 02:59 UTC](https://discourse.nodered.org/t/help-with-button-input-for-json-string/14185/1 "2019-08-10T02:59:35Z")

</div>

I've journeyed off and need to make a JSON string to be sent from a button when pressed.

Playing in the `function` node, I get that to make a `msg` it needs to be like this:  
(example)

```auto
msg = {
    payload: '<font color = '+colour+'><i class="fa fa-bullseye fa-2x"></i></font>',
    who: 'Clr'
};

```

But I am wanting to send a message which will have a structure something like:

```auto
msg.payload = "black";
msg.who = "Clr";

```

Which I get can be done like:

```auto
msg = {

```

(I just showed the other way/structure above.)

So.... If I want to send that from a button when pressed I select the `{ }` option but am stuck how to put the text there.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 August 2019 03:05 UTC](https://discourse.nodered.org/t/help-with-button-input-for-json-string/14185/2 "2019-08-10T03:05:35Z")

</div>

I'm having difficulty understanding your requirements but based on your previous post that you deleted you're trying to set icon and colour by payload?

Your original code was close. Here it is edited to (hopefully) work...

```auto
var x = "red";
msg = {payload: `<font color = "${x}"><i class="fa fa-bullseye fa-2x"></i></font>`};
return msg;

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 August 2019 03:06 UTC](https://discourse.nodered.org/t/help-with-button-input-for-json-string/14185/3 "2019-08-10T03:06:30Z")

</div>

`x` could of course be from a msg.payload

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 August 2019 03:09 UTC](https://discourse.nodered.org/t/help-with-button-input-for-json-string/14185/4 "2019-08-10T03:09:49Z")

</div>

I got that worked out.

Bit of "sticking things together" with the right _control_ symbols.

```auto
var colour = msg.payload;

//node.warn(colour);

msg = {
    payload: '<font color = '+colour+'><i class="fa fa-bullseye fa-2x"></i></font>',
    who: 'Clr'
};
return msg;

```

No problems - now.

So, that is sending the colour to the next node.

I am also wanting to send "text" to the node as well. So I need to add an extra thing to the payload.

(forgive me not using the right term.)

So I want to send (example)  
`msg.payload = "(colour)", msg.who = "(some text)"`

(Yeah, not the right way. I am struggling.

So rather than send it to a `CHANGE` node, (or my favourite: a `function` node) I can set it up in JSON format at the `button` node and send it.

But I have never used that before and am stuck with how to format the text.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 August 2019 03:11 UTC](https://discourse.nodered.org/t/help-with-button-input-for-json-string/14185/5 "2019-08-10T03:11:18Z")

</div>

> [@Steve-Mcl](#):
>
> msg = {payload: `\<i class="fa fa-bullseye fa-2

I didn't know that trick.

As you can see I bashed it out with how I posted above.

Thanks.  
I don't know what that isn't showing correctly.  
But this is the "trick" I didn't know:

```auto
msg = {payload: `<font color = "${x}"><i class="fa fa-bullseye fa-2x"></

```

The `"${x}"` part

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 August 2019 03:12 UTC](https://discourse.nodered.org/t/help-with-button-input-for-json-string/14185/6 "2019-08-10T03:12:05Z")

</div>

Search [template literals](https://www.google.com/url?sa=t&source=web&rct=j&url=https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals&ved=2ahUKEwiHqafLq_fjAhXxolwKHTtsCh4QFjAPegQIARAB&usg=AOvVaw0ebXv1JzqJI4XtKrT6qncz) js. Very useful.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 August 2019 03:15 UTC](https://discourse.nodered.org/t/help-with-button-input-for-json-string/14185/7 "2019-08-10T03:15:06Z")

</div>

> [@Trying\_to\_learn](#):
>
> So rather than send it to a `CHANGE` node, (or my favourite: a `function` node) I can set it up in JSON format at the `button` node and send it.

If you want to send JSON from a ui\_button it must be RFC valid.

E.g. no comments, double quotes around every property name...

```auto
{
  "who" : "me",
  "payload" : "some text"
}

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 August 2019 03:16 UTC](https://discourse.nodered.org/t/help-with-button-input-for-json-string/14185/8 "2019-08-10T03:16:57Z")

</div>

Ah.

Ok.

So it can be more than 1 line?

I was trying to put that on one line, and failing.

`{payload: 'black',who:'Clr'}`

The button node would show an error.

I'll try what you said now.

(BRB)

Ah! Stupid me.

Forgot the `"` around the payload and who.

Thanks.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [10 August 2019 03:50 UTC](https://discourse.nodered.org/t/help-with-button-input-for-json-string/14185/9 "2019-08-10T03:50:05Z")

</div>

(If you are still looking)

Ok.

So doing it like that it creates a `JSON` message.

I remember back to them because they are what comes out of a `MQTT` node too.

So the message "structure" is `msg.payload.(sub names)`  
And to use them after the `MQTT` node, I put them through a `JSON` node that breaks them back to the "normal" `msg.(name)` format.

Or that's what I believe - and it seems to be wrong.

I am again missing an elephant in how to do this.

The idea (big picture) is that I am going to send message from different parts of the flow/s via MQTT - or local links.

But for the sake of it I will say MQTT.

The message will have a "who" (for who sent the message) and a "payload" which will determine the colour of the bullseye. (indicator)

When "all is done" I press a button on that page/dashboad to "clear" the indicator.  
That will send a payload = "grey" and a who of "Clr".  
To turn the bullseye grey and put the text of Clr beside the indicator.

All that being good, I will feed the `button` output into the `JSON` node too and strip it back to normal message "format"/structure.

It doesn't seem to be wanting to play that game.

As I said, don't worry. I'll sit here and bash away at it.

But the elephant is annoying.

 ![Screenshot%20from%202019-08-10%2013-53-28](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b6637235825ab3c5b5b00e63c7578d668ee209eb.png)