# Popup Array of Data

**URL:** <https://discourse.nodered.org/t/popup-array-of-data/3520>\
**Category:** General\
**Created:** [28 September 2018 02:48 UTC](https://discourse.nodered.org/t/popup-array-of-data/3520 "2018-09-28T02:48:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ryanjohnson00](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryanjohnson00/32/2956_2.png) [@ryanjohnson00](https://discourse.nodered.org/u/ryanjohnson00)\
**Post date:** [28 September 2018 02:48 UTC](https://discourse.nodered.org/t/popup-array-of-data/3520/1 "2018-09-28T02:48:46Z")

</div>

I am looking for a way to have a popup show my msg.payload that is an array of data. I tried the notification node but it did not show my data in a list format but in one line.

I am looking to save space on the dashboard and thinking a popup would work best. Any suggestions?

---

<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:** [28 September 2018 05:13 UTC](https://discourse.nodered.org/t/popup-array-of-data/3520/2 "2018-09-28T05:13:55Z")

</div>

Use `Split node` and `Join node` to manipulate your data array into string separated with `newline` character before sending it to be payload of `Notification`. Notification however does not show multiple lines. It does it magic to join lines into one and makes itself wider.

```auto
[{"id":"8c90b3f2.5949","type":"split","z":"18c83e13.bcdd42","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":560,"y":940,"wires":[["c296e15f.a2cb1"]]},{"id":"c296e15f.a2cb1","type":"join","z":"18c83e13.bcdd42","name":"","mode":"custom","build":"string","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":700,"y":940,"wires":[["19900b90.8eef94"]]},{"id":"168d41d8.894a6e","type":"inject","z":"18c83e13.bcdd42","name":"","topic":"","payload":"[123,456,789]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":390,"y":940,"wires":[["8c90b3f2.5949"]]},{"id":"19900b90.8eef94","type":"debug","z":"18c83e13.bcdd42","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":870,"y":940,"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:** [28 September 2018 07:35 UTC](https://discourse.nodered.org/t/popup-array-of-data/3520/3 "2018-09-28T07:35:54Z")

</div>

The notification will take minimal html so just use \<br/\> tags or tables or whatever - maybe use a normal (not ui\_) template node to help iterate over data

```auto
[{"id":"b886bc86.a7bf6","type":"ui_toast","z":"d511095d.512808","position":"dialog","displayTime":"3","highlight":"","outputs":1,"ok":"OK","cancel":"","topic":"","name":"","x":530,"y":940,"wires":[[]]},{"id":"2c97b49d.73a86c","type":"inject","z":"d511095d.512808","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":940,"wires":[["2fdb1682.cda4ba"]]},{"id":"2fdb1682.cda4ba","type":"function","z":"d511095d.512808","name":"","func":"msg.payload = '<table border=1><tr><td>This</td><td>is</td></tr><tr><td>a</td><td>table</td></tr></table>';\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":940,"wires":[["b886bc86.a7bf6"]]}]

```

---

<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:** [28 September 2018 16:09 UTC](https://discourse.nodered.org/t/popup-array-of-data/3520/4 "2018-09-28T16:09:19Z")

</div>

If your `msg.payload` is already an array, you can use the JS `Array.join(sep)` to create (as Dave suggests) an html string with breaks, to be shown in the Notification area:

```auto
var msg.payload = msg.payload.join("<br>");
return msg;

```

Of course, if your payload ever arrives as a non-array data type, this will throw an exception.

---

<div class="post-metadata">

**Author:** ![ryanjohnson00](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ryanjohnson00/32/2956_2.png) [@ryanjohnson00](https://discourse.nodered.org/u/ryanjohnson00)\
**Post date:** [28 September 2018 18:00 UTC](https://discourse.nodered.org/t/popup-array-of-data/3520/5 "2018-09-28T18:00:25Z")

</div>

Thank you for the suggestions. We were able to get this to work using the notification and line breaks.

---

<div class="post-metadata">

**Author:** ![thebaldgeek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/thebaldgeek/32/93523_2.png) [@thebaldgeek](https://discourse.nodered.org/u/thebaldgeek)\
**Post date:** [17 November 2021 03:03 UTC](https://discourse.nodered.org/t/popup-array-of-data/3520/6 "2021-11-17T03:03:17Z")

</div>

This thread is one of the top 'popup' search results.  
Not sure if things have changed or not, but I can't get it to work as is 'solved'.

Here is my flow:

```auto
[{"id":"527679da.362dc8","type":"inject","z":"40353355.fa6ecc","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"AES:AE0587GES:502.70042B!33F/AMCTACC.INI01140312INITIALIZERCH7042MC0042PBC03810E315RODNRJTY140500/","payloadType":"str","x":320,"y":400,"wires":[["674b0eec.40193"]]},{"id":"674b0eec.40193","type":"function","z":"40353355.fa6ecc","name":"","func":"msg.payload = msg.payload.replace(/(.{1,20})/g, '$1<br/>');\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":400,"wires":[["30e1890d.168d56"]]},{"id":"30e1890d.168d56","type":"ui_toast","z":"40353355.fa6ecc","position":"top right","displayTime":"10","highlight":"","sendall":true,"outputs":0,"ok":"OK","cancel":"","raw":false,"topic":"","name":"","x":670,"y":400,"wires":[]}]

```

I have a string that I want to show with line breaks in the notification.  
I have tied a bunch of different line break options, but it does not hide them and does not line break.

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

'You have a problem.  
Regex is the answer  
Now you have two problems'

Thanls.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [17 November 2021 08:28 UTC](https://discourse.nodered.org/t/popup-array-of-data/3520/7 "2021-11-17T08:28:16Z")

</div>

![Screen Shot 2021-11-17 at 3.27.50 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/b/1bb74667a444a5632de0bf08ea8d013698595410.png)