# Working with different payload

**URL:** <https://discourse.nodered.org/t/working-with-different-payload/2658>\
**Category:** Dashboard\
**Created:** [29 August 2018 13:06 UTC](https://discourse.nodered.org/t/working-with-different-payload/2658 "2018-08-29T13:06:15Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![frux](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@frux](https://discourse.nodered.org/u/frux)\
**Post date:** [29 August 2018 13:06 UTC](https://discourse.nodered.org/t/working-with-different-payload/2658/1 "2018-08-29T13:06:15Z")

</div>

Hey, I need to do a custom dashboard where I'll put a map of my office with different values from sensors. My problem is that I have 3 mqtt nodes and I need to connect this 3 nodes to the same ui-template dashboard because there I add the map image and I access to the msg.payload of mqtt nodes.

The main question is how I can differentiate the 3 payloads into iu-template node 🙂

This is the code of ui-template node:

```
> <div id="planta" style="position: relative; top: 75%; left: 15%; font-size:160%; font-weight: bold;">
> {{msg.payload}} dB
> </div>
> 
> 
> <div id="planta" style="position: relative; top: 33%; left: 79%; font-size:160%; font-weight: bold;">
> {{msg.payload}} dB
> </div>
> 
> <div id="planta" style="position: relative; top: 68%; left: 79%; font-size:160%; font-weight: bold;">
> {{msg.payload}} dB
> </div>
> 
> <div id="planta">
> <img src="/plano_de_oficina.png" alt="Cinque Terre" width="1000" height="600">
> </div>

```

Thanks you very much 🙂

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [29 August 2018 14:43 UTC](https://discourse.nodered.org/t/working-with-different-payload/2658/2 "2018-08-29T14:43:54Z")

</div>

Well, if each sensor sets a different topic on the msg it sends, then each ui element can be linked to an `mqtt in` node that listens for only that topic... is this what you are asking?

---

<div class="post-metadata">

**Author:** ![frux](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@frux](https://discourse.nodered.org/u/frux)\
**Post date:** [29 August 2018 14:53 UTC](https://discourse.nodered.org/t/working-with-different-payload/2658/3 "2018-08-29T14:53:32Z")

</div>

Hi shrickus, thanks you for your time 🙂

The main problem is that if I put a ui-template node for each one `mqtt in` node, the dashboard split the differents contents that I need show there, this are: 3 values into a image, for this reason I'm trying to put the 3 values and the image in the same ui-template node instead of different nodes.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [29 August 2018 14:58 UTC](https://discourse.nodered.org/t/working-with-different-payload/2658/4 "2018-08-29T14:58:32Z")

</div>

at some previous point do you have them either in the one object ? or different topics ? or somehow differentiated... if in a single object (with eg item1, item2 etc you could use {{msg.payload.item1}} etc

---

<div class="post-metadata">

**Author:** ![frux](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@frux](https://discourse.nodered.org/u/frux)\
**Post date:** [29 August 2018 15:05 UTC](https://discourse.nodered.org/t/working-with-different-payload/2658/5 "2018-08-29T15:05:13Z")

</div>

Hi @dceejay, thanks for help me,

My goal is some like this picture:  
 ![goal](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/89a7fef57414ee861047296aeb654d84f2b2c31a.png)

where in ui-template code is in my first message 🙂

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [29 August 2018 15:05 UTC](https://discourse.nodered.org/t/working-with-different-payload/2658/6 "2018-08-29T15:05:20Z")

</div>

Sounds like you need to use 3 topics with a common root (e.g. "OfficeA/Sensor1", "OfficeA/Sensor2", "OfficeA/Sensor3") -- then set up the `mqtt in` node to listen for the topic "OfficeA/#" so that one node receives all three sensor readings.

Wire that to a `join` node set to manual mode that waits for all 3 topics and groups the readings into a single payload object. When the `ui_template` gets the payload object, it should be able to reference each part of the payload by topic name. If that is not clear, then post the part of your flow you have developed (surrounded by lines with only 3 backtics `````) and someone will be able to help you get it working.

---

<div class="post-metadata">

**Author:** ![frux](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@frux](https://discourse.nodered.org/u/frux)\
**Post date:** [29 August 2018 15:29 UTC](https://discourse.nodered.org/t/working-with-different-payload/2658/7 "2018-08-29T15:29:28Z")

</div>

In fact, I tryed to use the join node the similar form that you say but I don't know how to do that the respectives sensor have the same array posicion, for example, sensor 1 in position 0, sensor 2 in position 1... for in the template access to it `msg[0].payload` and if, for example, one sensor stop send, join node have to drive data without wait all sensor.

---

<div class="post-metadata">

**Author:** ![frux](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@frux](https://discourse.nodered.org/u/frux)\
**Post date:** [29 August 2018 15:35 UTC](https://discourse.nodered.org/t/working-with-different-payload/2658/8 "2018-08-29T15:35:21Z")

</div>

It's possible to set some criteria in the ui\_template code? because I think some like: show `msg.payload` of node that `msg.topic` is topic1.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [29 August 2018 15:46 UTC](https://discourse.nodered.org/t/working-with-different-payload/2658/9 "2018-08-29T15:46:07Z")

</div>

using the join as below ought to get you a single message with all three parts in

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/095fb642f4e0374bc20fa02b4fb2fa76db1284bf.png)

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [29 August 2018 15:54 UTC](https://discourse.nodered.org/t/working-with-different-payload/2658/10 "2018-08-29T15:54:13Z")

</div>

This flow shows how 3 different topics/payloads can be combined into one payload, with each sensor value in its own named property:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e8d7aac6d494e4b25d4adda385fa14091f17b716.png)

```auto
[{"id":"9ce94fe7.f2429","type":"join","z":"9cd675b0.a84be8","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"1","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":450,"y":1220,"wires":[["72d26ae1.fab164"]]},{"id":"202e0bd.d893bf4","type":"inject","z":"9cd675b0.a84be8","name":"","topic":"sensor1","payload":"10","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":260,"y":1180,"wires":[["9ce94fe7.f2429"]]},{"id":"564598e3.276bf8","type":"inject","z":"9cd675b0.a84be8","name":"","topic":"sensor2","payload":"20","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":260,"y":1220,"wires":[["9ce94fe7.f2429"]]},{"id":"ad32a8c.244f758","type":"inject","z":"9cd675b0.a84be8","name":"","topic":"sensor3","payload":"13","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":260,"y":1260,"wires":[["9ce94fe7.f2429"]]},{"id":"72d26ae1.fab164","type":"debug","z":"9cd675b0.a84be8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":630,"y":1220,"wires":[]}]

```

Every time any of the sensor readings is sent, the `join` node outputs a payload object, containing the last reading for each topic it received (notice how the payload grows with each newly injected msg).

With a combined payload like this, you just need to update your template code to refer to each value by its property name, something like this:

```auto
<div id="planta" style="position: relative; top: 75%; left: 15%; font-size:160%; font-weight: bold;">
    {{msg.payload.sensor1 || '?'}} dB
</div>
<div id="planta" style="position: relative; top: 33%; left: 79%; font-size:160%; font-weight: bold;">
    {{msg.payload.sensor2 || '?'}} dB
</div>
<div id="planta" style="position: relative; top: 68%; left: 79%; font-size:160%; font-weight: bold;">
    {{msg.payload.sensor3 || '?'}} dB
</div>

```

Since the payload is not guaranteed to have all 3 topics present, you need to test for an undefined value and display something else, which is why I used the syntax:  
`{{msg.payload.sensor1 || '?'}}` meaning to show a question mark if the value is not found (or 0, actually)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [29 August 2018 16:03 UTC](https://discourse.nodered.org/t/working-with-different-payload/2658/11 "2018-08-29T16:03:56Z")

</div>

> Since the payload is not guaranteed to have all 3 topics present,...

or wait for all three first... by setting the number of parts required to be 3 🙂

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [29 August 2018 16:14 UTC](https://discourse.nodered.org/t/working-with-different-payload/2658/12 "2018-08-29T16:14:22Z")

</div>

Right, but he said he wants to show 1 or 2 of the readings, even if the 3rd is not sending (for some reason) -- so I went with count = 1

---

<div class="post-metadata">

**Author:** ![frux](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@frux](https://discourse.nodered.org/u/frux)\
**Post date:** [29 August 2018 17:14 UTC](https://discourse.nodered.org/t/working-with-different-payload/2658/13 "2018-08-29T17:14:21Z")

</div>

This solution is perfect, my project run exactly I want, many thanks @shrickus and @dceejay 😃😃