# How to use jcon data as a variable in UI template

**URL:** <https://discourse.nodered.org/t/how-to-use-jcon-data-as-a-variable-in-ui-template/58433>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [16 February 2022 05:57 UTC](https://discourse.nodered.org/t/how-to-use-jcon-data-as-a-variable-in-ui-template/58433 "2022-02-16T05:57:37Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![9manloon](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/9manloon/32/56561_2.png) [@9manloon](https://discourse.nodered.org/u/9manloon)\
**Post date:** [16 February 2022 05:57 UTC](https://discourse.nodered.org/t/how-to-use-jcon-data-as-a-variable-in-ui-template/58433/1 "2022-02-16T05:57:37Z")

</div>

I need to use a jcon value to insert to a url of a image.  
for example, I need to use the result of the payload "msg.dayicon" and inset to the url to display the image.  
If msg.dayicon is 50, then the URL will be: [https://www.hko.gov.hk/images/HKOWxIconOutline/pic50.png](https://www.hko.gov.hk/images/HKOWxIconOutline/pic50.png)

If msg.dayicon is 60, then the URL will be: [https://www.hko.gov.hk/images/HKOWxIconOutline/pic60.png](https://www.hko.gov.hk/images/HKOWxIconOutline/pic60.png)

How can I do this in Dashboard UI template node.

```auto
<div id="weekday3_icon"></div>
<script>

var radial1;
    (function(scope){ 
        scope.$watch('msg', function(msg) {
            var day3_icon = msg.dayicon;
        });
        });
    })(scope);
    
document.getElementById('weekday3_icon').innerHTML = '<img src="https://www.hko.gov.hk/images/HKOWxIconOutline/pic' + day3_icon + '.png" style="width:50px;height:50px;"/>';
    
    
    
</script>

<script type="text/javascript">
document.getElementById('weekday3_icon').innerHTML = '<img src="https://www.hko.gov.hk/images/HKOWxIconOutline/pic' + day3_icon + '.png" style="width:50px;height:50px;"/>';
</script>

```

---

<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:** [18 March 2022 05:57 UTC](https://discourse.nodered.org/t/how-to-use-jcon-data-as-a-variable-in-ui-template/58433/2 "2022-03-18T05:57:51Z")

</div>

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