# QR Code URI Image in ui table

**URL:** <https://discourse.nodered.org/t/qr-code-uri-image-in-ui-table/42541>\
**Category:** Dashboard\
**Created:** [12 March 2021 13:57 UTC](https://discourse.nodered.org/t/qr-code-uri-image-in-ui-table/42541 "2021-03-12T13:57:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [12 March 2021 13:57 UTC](https://discourse.nodered.org/t/qr-code-uri-image-in-ui-table/42541/1 "2021-03-12T13:57:51Z")

</div>

Hello,

I would like to convert a qr-code number (for instance 001001) to a URI Image and show that in a ui table.  
I would like to do that in "vanilla" javascript or with help from nodes.

i can create a qr code with the qrcode-generator node and show it in html with the following flow:  
 ![qrflow1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/6/d668967b07455171c12c7d408b743c3c3487b482.png)

Code:

```auto
[{"id":"583db9df.a992b8","type":"inject","z":"a34ad955.984fd","name":"","props":[{"p":"qrcodeinput","v":"12345","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"str","x":460,"y":1340,"wires":[["63080d19.8348cc"]]},{"id":"63080d19.8348cc","type":"qrcode-generator","z":"a34ad955.984fd","name":"","qrtype":"text2qr","text2qrText":"1234","ssid":"","hiddenssid":false,"wifitype":"","phonenum":"","smsphonenum":"","smstext":"","mailto":"","mailsubject":"","mailbody":"","latitude":"","longitude":"","colorlight":"#ffffff","colordark":"#000000","printstatus":true,"x":650,"y":1340,"wires":[["4f5db828.2f762"]]},{"id":"3f722f9c.1dcdd8","type":"ui_template","z":"a34ad955.984fd","group":"84037d42.46728","name":"","order":0,"width":"15","height":"10","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1000,"y":1340,"wires":[[]]},{"id":"4f5db828.2f762","type":"template","z":"a34ad955.984fd","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"60px\" height= \"60px\" src=\"{{{payload}}}\">","output":"str","x":820,"y":1340,"wires":[["3f722f9c.1dcdd8"]]},{"id":"84037d42.46728","type":"ui_group","z":"","name":"Group 4","tab":"f3dcc58e.bfd5d8","order":4,"disp":true,"width":"33","collapse":false},{"id":"f3dcc58e.bfd5d8","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":19,"disabled":false,"hidden":false}]

```

The real payload with the numbers for the cr codes looks like that:  
 ![message mit qr codes](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/9/b91b61b54df25356f94ff772ee0138118d35d832.png)

Its a bigger flow and the data comes from a database.

I would like to convert the number under Barcode1,2,3 et. to a URI Image string to show on html without loosing the payload and its structure.  
Maybe per adding a new output like msg.payload.URI1 ,2,3,4 ...etc.  
I work through the array of objects with a loop to get my array:

```auto
let arr = []
let obj
var Fsize = 12

var k = 0 //Komponentenzähler
//var goggle = "<a href=" + '"'+"http://sites.google.com"+'"'+ "title="Beispiel das der Link funktioniert"><img src="+'"'+"https://media-exp1.licdn.com/dms/image/C510BAQERYJ4HI46uuA/company-logo_200_200/0/1519887010870?e=2159024400&v=beta&t=1mCqQUZuWboad9WV0k5EYBhaH9jaUDeAIFdrEXNt2xk"+'"'+ "border=+'"'+ "0"+'"'+" Height="100px" Width="100px"></a>"
            //<a href="http://sites.google.com" title="Beispiel das der Link funktioniert"><img src="https://media-exp1.licdn.com/dms/image/C510BAQERYJ4HI46uuA/company-logo_200_200/0/1519887010870?e=2159024400&v=beta&t=1mCqQUZuWboad9WV0k5EYBhaH9jaUDeAIFdrEXNt2xk" border="0" Height="100px" Width="100px"></a>
for(k=0;k<1000;k++){
    if(msg.payload[k]){
    }else{
         break
    }
}
 
function isNull() {
    for (var i = 0; i < arguments.length; i++) {
        if (
            typeof arguments[i] !== 'undefined'
            && arguments[i] !== undefined
            && arguments[i] != null
            && arguments[i] != NaN
            && arguments[i] 
        ) return arguments[i];
      }
} 
 
    
for(let i=0;i<k;i++){
    obj = {}
    obj.Device_Name = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Device_Name+"</div>" 
    obj.Device_Nr = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Device_Nr+"</div>"
    
     //obj.Device_Barcodes = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Device_Barcodes+"</div>"

    
    var string = msg.payload[i].Device_Barcodes
    var splittedstring = string.split("\n")
    
  
    obj.Barcode1 = splittedstring[0]||""
    obj.Barcode2 = splittedstring[1]||""
    obj.Barcode3 = splittedstring[2]||""
    obj.Barcode4 = splittedstring[3]||""
    
    obj.Device_Serial = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Device_Serial+"</div>"
    obj.Device_Type = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Device_Type+"</div>"
    obj.Booking_DateTime = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Booking_DateTime+"</div>"
    obj.Booking_Remarks = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Booking_Remarks+"</div>"
    obj.Location_Name = "<div style=' font-size:"+Fsize+"px'>"+msg.payload[i].Location_Name+"</div>"
    if(isNull(msg.payload[i].Documents)){
    obj.Documents = Grundpfad + msg.payload[i].Documents 
    //obj.Documents = "<div style=' font-size:"+Fsize+"px'>"+Grundpfad + msg.payload[i].Documents+"</div>" 
    }else{
    obj.Documents = "Kein Dokument hinterlegt"
   //obj.Documents = "<a href="http://sites.google.com" title="Beispiel das der Link funktioniert"><img src="https://media-exp1.licdn.com/dms/image/C510BAQERYJ4HI46uuA/company-logo_200_200/0/1519887010870?e=2159024400&v=beta&t=1mCqQUZuWboad9WV0k5EYBhaH9jaUDeAIFdrEXNt2xk" border="0" Height="100px" Width="100px"></a>"

    }
    arr.push(obj)
}

const komps = arr;

function compare(a, b) {
  const Device_TypeA = a.Device_Type.toUpperCase();
  const Device_TypeB = b.Device_Type.toUpperCase();

  let comparison = 0;
  if (Device_TypeA > Device_TypeB) {
    comparison = 1;
  } else if (Device_TypeA < Device_TypeB) {
    comparison = -1;
  }
  return comparison;
}

komps.sort(compare);

//node.warn(arr)
msg.payload = komps

msg.topic = k

return msg;

```

So in my thoughts i would like to do that in the loop.

may be someone has an idea for that ?

Dearly  
Chorum

---

<div class="post-metadata">

**Author:** ![Danigote](https://avatars.discourse-cdn.com/v4/letter/d/ccd318/32.png) [@Danigote](https://discourse.nodered.org/u/Danigote)\
**Post date:** [6 April 2021 10:23 UTC](https://discourse.nodered.org/t/qr-code-uri-image-in-ui-table/42541/2 "2021-04-06T10:23:59Z")

</div>

Hi Chorum  
Can I contact you, please?, I need some information about generate qrcode for my project at school.  
Thanks

---

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [6 April 2021 10:39 UTC](https://discourse.nodered.org/t/qr-code-uri-image-in-ui-table/42541/3 "2021-04-06T10:39:10Z")

</div>

Yeap, you can 🙂

But i am busy until thursday.  
Send me a message with your actual state and the questions.

I can close this thread, i found the solution and the flow is working as intended 🙂

Moving on to the next task... If there are any questions pm me.

---

<div class="post-metadata">

**Author:** ![Danigote](https://avatars.discourse-cdn.com/v4/letter/d/ccd318/32.png) [@Danigote](https://discourse.nodered.org/u/Danigote)\
**Post date:** [6 April 2021 10:46 UTC](https://discourse.nodered.org/t/qr-code-uri-image-in-ui-table/42541/4 "2021-04-06T10:46:52Z")

</div>

I find out how to send you a message but this appeared:  
"Sorry, you cannot send a personal message to that user."

---

<div class="post-metadata">

**Author:** ![Chorum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chorum/32/47644_2.png) [@Chorum](https://discourse.nodered.org/u/Chorum)\
**Post date:** [6 April 2021 10:55 UTC](https://discourse.nodered.org/t/qr-code-uri-image-in-ui-table/42541/5 "2021-04-06T10:55:12Z")

</div>

You can send a message from your messages options here in the forum.

simply "new message" 🙂

---

<div class="post-metadata">

**Author:** ![Danigote](https://avatars.discourse-cdn.com/v4/letter/d/ccd318/32.png) [@Danigote](https://discourse.nodered.org/u/Danigote)\
**Post date:** [6 April 2021 11:11 UTC](https://discourse.nodered.org/t/qr-code-uri-image-in-ui-table/42541/6 "2021-04-06T11:11:00Z")

</div>

I find out how to send you a message but this appeared:  
"Sorry, you cannot send a personal message to that user."

---

<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:** [20 April 2021 11:11 UTC](https://discourse.nodered.org/t/qr-code-uri-image-in-ui-table/42541/7 "2021-04-20T11:11:09Z")

</div>

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