# Sort a payload array into object id's and into a UI

**URL:** <https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582>\
**Category:** General\
**Created:** [26 November 2020 19:27 UTC](https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582 "2020-11-26T19:27:15Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![panban-ux](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/panban-ux/32/21609_2.png) [@panban-ux](https://discourse.nodered.org/u/panban-ux)\
**Post date:** [26 November 2020 19:27 UTC](https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582/1 "2020-11-26T19:27:16Z")

</div>

In short i've got this array [73,4,75,2,56,2,58,1,57,1,45,1] and some how i want to manipulate this data into a UI dashboard just to monitor how many times an object appears. In this case 73 is the id in my back end application for a lemon and it appears 4 times and so on. To recap this sequence [0 2 4 6 8 10] contains the id's of my objects and odd sequence in the middle is the count times of the object.  
Where do i start for example if my array gives eg [73,45] so to draw in my ui i got 45 lemons?  
The screenshot of the debug window, for where the payload is ![Screenshot from 2020-11-26 21-21-09](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/a/8a636b7e37e6f3b57f6c1516a46afdf01c6cc54f.png)

---

<div class="post-metadata">

**Author:** ![janvda](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/janvda/32/234_2.png) [@janvda](https://discourse.nodered.org/u/janvda)\
**Post date:** [26 November 2020 21:35 UTC](https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582/2 "2020-11-26T21:35:22Z")

</div>

> [@panban-ux](#):
>
> Where do i start for example if my array gives eg [73,45] so to draw in my ui i got 45 lemons?

Your question is not very clear to me. What do you mean by “start” ?

---

<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:** [26 November 2020 21:39 UTC](https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582/3 "2020-11-26T21:39:31Z")

</div>

As this is "your backend application" - i strongly suggest you transmit JSON instead if arrays.

JSON (like XML) is extensible and transforms with very little effort into a JS object.

The problem with arrays (like CSV) is that any change in format ruins the whole party where as

```auto
{ 
  "lemons": 4
}

```

will ALWAYS be 4 lemons and accessible as a JS object property `payload.lemons`

even if in the future you change that to

```auto
{ 
  "lemons": 4,
  "unit_price": 40,
  "stock_no": "L12345",
  "description": "Fresh Lemons"
}

```

---

<div class="post-metadata">

**Author:** ![panban-ux](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/panban-ux/32/21609_2.png) [@panban-ux](https://discourse.nodered.org/u/panban-ux)\
**Post date:** [27 November 2020 10:45 UTC](https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582/4 "2020-11-27T10:45:02Z")

</div>

For example i might get a value decoded out of my node, as byte array. Here as [73,45] it means the first number will represent an object id (in this case lemons) and after the comma the population(count) of them. It can be more populated as described above.  
@Steve-Mcl  
Steve i cant transmit a JSON as my medium is Lora, already sorted, compressed and encoded for getting the payload as minimised as it is. Hence the form of this information.  
[73,4,75,2,56,2,58,1,57,1,45,1]

---

<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:** [27 November 2020 10:55 UTC](https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582/5 "2020-11-27T10:55:26Z")

</div>

> [@panban-ux](#):
>
> compressed and encoded for getting the payload as minimised as it is

Is the trade off really worth it? Have you measured and evaluated that transmitting JSON vs a dumb array is the bottleneck? ([this](https://medium.com/@dtunkelang/premature-optimization-is-still-the-root-of-all-evil-a3502c2ea262) might be worth a read)

Anyhow ...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/6/b6f7fcbf41fc60b29428b58beb40b3e80d4cf1cf.png)

```auto
[{"id":"11942aca.455835","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"8652da88.8d7e58","type":"inject","z":"11942aca.455835","name":"test data [73,4,75,2,56,2,58,1,57,1,45,1]","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[73,4,75,2,56,2,58,1,57,1,45,1]","payloadType":"json","x":830,"y":140,"wires":[["f7844f50.7553c"]]},{"id":"f7844f50.7553c","type":"function","z":"11942aca.455835","name":"","func":"var lookup = {\n 73 : \"lemon\",\n 75 : \"pear\",\n 56 : \"apple\",\n 58 : \"orange\",\n 57 : \"kiwi\",\n 45 : \"grapefruit\"\n}\n\nvar result = {};\nfor (let i = 0; i < msg.payload.length - 2; i=i+2) {\n let i1 = msg.payload[i];\n let i2 = msg.payload[i+1];\n let name = lookup[i1] || \"Unknown\" + i1;\n result[name] = {\n id: i1,\n value: i2\n }\n}\n\nmsg.payload = result;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":760,"y":200,"wires":[["ad3a363a.68ba28"]]},{"id":"ad3a363a.68ba28","type":"debug","z":"11942aca.455835","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":950,"y":200,"wires":[]}]

```

---

<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:** [27 November 2020 11:16 UTC](https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582/6 "2020-11-27T11:16:02Z")

</div>

@Steve-Mcl - Afraid so - LORA is really strict on packet sizes so no-one is going to send raw JSON. (You can but it's a total waste when you may have only 20-40 bytes.)

---

<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:** [27 November 2020 11:18 UTC](https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582/7 "2020-11-27T11:18:01Z")

</div>

oh well - the solution offered will work so long as the array always has an even number of elements and the spec doesnt change!

---

<div class="post-metadata">

**Author:** ![janvda](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/janvda/32/234_2.png) [@janvda](https://discourse.nodered.org/u/janvda)\
**Post date:** [27 November 2020 13:09 UTC](https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582/8 "2020-11-27T13:09:58Z")

</div>

> [@panban-ux](#):
>
> For example i might get a value decoded out of my node, as byte array. Here as [73,45] it means the first number will represent an object id (in this case lemons) and after the comma the population(count) of them. It can be more populated as described above.

I understand that the input is a buffer of hexadecimal values where the first identifies the type (e.g. "Lemon") and the following hexadecimal specified the quantity.

... but I don't understand what you exactly want from us. Where do you need our help ? What do you want to do with that buffer array ?

---

<div class="post-metadata">

**Author:** ![panban-ux](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/panban-ux/32/21609_2.png) [@panban-ux](https://discourse.nodered.org/u/panban-ux)\
**Post date:** [27 November 2020 15:12 UTC](https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582/9 "2020-11-27T15:12:25Z")

</div>

> [@panban-ux](#):
>
> 73,4,75,2,56,2,58,1,57,1,45,1

Steve yes, that database creation of id's inside the function worked, though i cant display the last object. In this case the grapefruit 45,1 or whatever i add to the end of the array and tweak the id's inside the function for injecting it. Thanks a lot Steve

@janvda I want to create a gauge or similar dashboard in order to visualize somehow the generated data. I have a generated JSON file on the other end with those names, but i couldn't relay whole names so i id'ed them to reduce the payload.

---

<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:** [27 November 2020 15:17 UTC](https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582/10 "2020-11-27T15:17:26Z")

</div>

> [@panban-ux](#):
>
> though i cant display the last object

change the for loop to `length - 1` (instead of `length - 2`)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/6/a64b3523e8514582fc298b8779aefe6a3c3ca11f.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [27 November 2020 16:46 UTC](https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582/11 "2020-11-27T16:46:24Z")

</div>

> [@panban-ux](#):
>
> I want to create a gauge or similar dashboard in order to visualize somehow the generated data.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/4/246830c188d82d529b82f387d3f626aaa9406d67.png)

```auto
[{"id":"8652da88.8d7e58","type":"inject","z":"11942aca.455835","name":"test data [73,4,75,2,56,2,58,1,57,1,45,1]","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[73,4,75,2,56,2,58,1,57,1,45,1]","payloadType":"json","x":330,"y":200,"wires":[["f7844f50.7553c"]]},{"id":"f7844f50.7553c","type":"function","z":"11942aca.455835","name":"","func":"var lookup = {\n 73 : \"lemon\",\n 75 : \"pear\",\n 56 : \"apple\",\n 58 : \"orange\",\n 57 : \"kiwi\",\n 45 : \"grape\"\n}\n\nvar result = {};\nfor (let i = 0; i < msg.payload.length -1; i=i+2) {\n let i1 = msg.payload[i];\n let i2 = msg.payload[i+1];\n let name = lookup[i1] || \"Unknown\" + i1;\n result[name] = {\n id: i1,\n value: i2\n }\n}\n\nmsg.payload = result;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":360,"y":260,"wires":[["95e39192.b6b3e"]]},{"id":"95e39192.b6b3e","type":"split","z":"11942aca.455835","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"topic","x":490,"y":260,"wires":[["4d4b06e5.dfbee8"]]},{"id":"4d4b06e5.dfbee8","type":"switch","z":"11942aca.455835","name":"","property":"parts.index","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"2","vt":"num"},{"t":"eq","v":"3","vt":"num"},{"t":"eq","v":"4","vt":"num"},{"t":"eq","v":"5","vt":"num"}],"checkall":"true","repair":false,"outputs":6,"x":610,"y":260,"wires":[["7d360c0f.cc6824"],["b8b84d2c.fa04e"],["42066a9f.915764"],["8adf8ab2.28f938"],["a2f68b42.0cfbb8"],["13ad4094.4e9f7f"]]},{"id":"7d360c0f.cc6824","type":"ui_artlessgauge","z":"11942aca.455835","group":"61e6d4c4.e7619c","order":0,"width":0,"height":0,"name":"","icon":"iconify-whh:lemon","label":"Lemon","unit":"pieces","layout":"linear","decimals":0,"differential":false,"minmax":false,"colorTrack":"#555555","style":"","colorFromTheme":true,"property":"payload.value","sectors":[{"val":0,"col":"#ff9900","t":"min","dot":0},{"val":10,"col":"#ff9900","t":"max","dot":0}],"lineWidth":3,"bgcolorFromTheme":true,"diffCenter":"","x":800,"y":160,"wires":[]},{"id":"b8b84d2c.fa04e","type":"ui_artlessgauge","z":"11942aca.455835","group":"61e6d4c4.e7619c","order":0,"width":0,"height":0,"name":"","icon":"iconify-whh:pear","label":"Pear","unit":"pieces","layout":"linear","decimals":0,"differential":false,"minmax":false,"colorTrack":"#555555","style":"","colorFromTheme":true,"property":"payload.value","sectors":[{"val":0,"col":"#ff9900","t":"min","dot":0},{"val":10,"col":"#ff9900","t":"max","dot":0}],"lineWidth":3,"bgcolorFromTheme":true,"diffCenter":"","x":820,"y":200,"wires":[]},{"id":"832076d9.58b078","type":"ui_template","z":"11942aca.455835","group":"61e6d4c4.e7619c","name":"Iconify","order":2,"width":0,"height":0,"format":"<script src=\"https://code.iconify.design/1/1.0.7/iconify.min.js\"></script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":790,"y":120,"wires":[[]]},{"id":"42066a9f.915764","type":"ui_artlessgauge","z":"11942aca.455835","group":"61e6d4c4.e7619c","order":0,"width":0,"height":0,"name":"","icon":"iconify-whh:apple","label":"Apple","unit":"pieces","layout":"linear","decimals":0,"differential":false,"minmax":false,"colorTrack":"#555555","style":"","colorFromTheme":true,"property":"payload.value","sectors":[{"val":0,"col":"#ff9900","t":"min","dot":0},{"val":10,"col":"#ff9900","t":"max","dot":0}],"lineWidth":3,"bgcolorFromTheme":true,"diffCenter":"","x":840,"y":240,"wires":[]},{"id":"8adf8ab2.28f938","type":"ui_artlessgauge","z":"11942aca.455835","group":"61e6d4c4.e7619c","order":0,"width":0,"height":0,"name":"","icon":"iconify-whh:orange","label":"Orange","unit":"pieces","layout":"linear","decimals":0,"differential":false,"minmax":false,"colorTrack":"#555555","style":"","colorFromTheme":true,"property":"payload.value","sectors":[{"val":0,"col":"#ff9900","t":"min","dot":0},{"val":10,"col":"#ff9900","t":"max","dot":0}],"lineWidth":3,"bgcolorFromTheme":true,"diffCenter":"","x":840,"y":280,"wires":[]},{"id":"a2f68b42.0cfbb8","type":"ui_artlessgauge","z":"11942aca.455835","group":"61e6d4c4.e7619c","order":0,"width":0,"height":0,"name":"","icon":"iconify-whh:kiwifruit","label":"Kiwi","unit":"pieces","layout":"linear","decimals":0,"differential":false,"minmax":false,"colorTrack":"#555555","style":"","colorFromTheme":true,"property":"payload.value","sectors":[{"val":0,"col":"#ff9900","t":"min","dot":0},{"val":10,"col":"#ff9900","t":"max","dot":0}],"lineWidth":3,"bgcolorFromTheme":true,"diffCenter":"","x":820,"y":320,"wires":[]},{"id":"13ad4094.4e9f7f","type":"ui_artlessgauge","z":"11942aca.455835","group":"61e6d4c4.e7619c","order":0,"width":0,"height":0,"name":"","icon":"iconify-whh:grapes","label":"Grape","unit":"pieces","layout":"linear","decimals":0,"differential":false,"minmax":false,"colorTrack":"#555555","style":"","colorFromTheme":true,"property":"payload.value","sectors":[{"val":0,"col":"#ff9900","t":"min","dot":0},{"val":10,"col":"#ff9900","t":"max","dot":0}],"lineWidth":3,"bgcolorFromTheme":true,"diffCenter":"","x":800,"y":360,"wires":[]},{"id":"61e6d4c4.e7619c","type":"ui_group","name":"Fruits","tab":"d1f9fcd9.d4fbc","order":1,"disp":true,"width":"6","collapse":false},{"id":"d1f9fcd9.d4fbc","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![panban-ux](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/panban-ux/32/21609_2.png) [@panban-ux](https://discourse.nodered.org/u/panban-ux)\
**Post date:** [27 November 2020 20:43 UTC](https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582/12 "2020-11-27T20:43:20Z")

</div>

Looks fancy too!! I'll try your flow too @hotNipi thank you.  
@Steve-Mcl Steve thank you, it worked)

---

<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:** [11 December 2020 20:43 UTC](https://discourse.nodered.org/t/sort-a-payload-array-into-object-ids-and-into-a-ui/36582/13 "2020-12-11T20:43:27Z")

</div>

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