# Data array initial value

**URL:** <https://discourse.nodered.org/t/data-array-initial-value/88402>\
**Category:** General\
**Created:** [31 May 2024 08:50 UTC](https://discourse.nodered.org/t/data-array-initial-value/88402 "2024-05-31T08:50:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alex4](https://avatars.discourse-cdn.com/v4/letter/a/b487fb/32.png) [@Alex4](https://discourse.nodered.org/u/Alex4)\
**Post date:** [31 May 2024 08:50 UTC](https://discourse.nodered.org/t/data-array-initial-value/88402/1 "2024-05-31T08:50:35Z")

</div>

Hi,

I have a UI-template node which values are contained in a data array as below.

```auto
data() {
   return{
        values:[]
     }
}

```

I want to initialize the values of this array with the data coming from msg.payload.  
I tried using the mounted function with no success.  
How would you do that ?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [31 May 2024 09:14 UTC](https://discourse.nodered.org/t/data-array-initial-value/88402/2 "2024-05-31T09:14:26Z")

</div>

> [@Alex4](#):
>
> I want to initialize the values of this array with the data coming from msg.payload.

You can't _initialise_ it with a value from msg.payload as it is initialised when the widget is loaded. You can _update_ it when a message comes in by providing a watch msg function in the script. Something like

```auto
<script>
    export default{
        ...
        watch: {
            msg: function(){
                this.values = this.msg.payload
            }
        },
        ...

```

That assumes the values array is in msg.payload. Adjust according to where the values are. You might want to have some validation code to make sure the payload is valid before updating the data.

---

<div class="post-metadata">

**Author:** ![Alex4](https://avatars.discourse-cdn.com/v4/letter/a/b487fb/32.png) [@Alex4](https://discourse.nodered.org/u/Alex4)\
**Post date:** [31 May 2024 09:56 UTC](https://discourse.nodered.org/t/data-array-initial-value/88402/3 "2024-05-31T09:56:42Z")

</div>

Hi Colin,

Awesome ! I have implemented your solution with minor adaptation to initialize the value only upon the first message received (using msgCount flag) and it answer my needs.

```auto
data() {
    return{
        values:[],
        msgCount:0
    }
},
...
watch: {
    msg: function(){
        if (this.msgCount==0) {
            this.values = this.msg.payload
            this.msgCount=1
        }
    }
},

```

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [31 May 2024 10:05 UTC](https://discourse.nodered.org/t/data-array-initial-value/88402/4 "2024-05-31T10:05:01Z")

</div>

Initialization of the array is also possible in mounted()

[flows(22).json](https://discourse.nodered.org/uploads/short-url/rrClswA510wY6raFGbLLVv14kvD.json) (3.7 KB)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [31 May 2024 10:28 UTC](https://discourse.nodered.org/t/data-array-initial-value/88402/5 "2024-05-31T10:28:27Z")

</div>

> [@RedTom](#):
>
> also possible in mounted()

In the flow you posted you have

```auto
<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                count: 0,
                data:[]
            }
        },
        ...
        mounted() {
            // code here when the component is first loaded
            this.data=[4,5,6];
        },
        ...

```

Is that any different to just doing

```auto
<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                count: 0,
                data:[4,5,6]
            }
        },

```

---

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [31 May 2024 10:44 UTC](https://discourse.nodered.org/t/data-array-initial-value/88402/6 "2024-05-31T10:44:21Z")

</div>

> [@Alex4](#):
>
> I tried using the mounted function with no success.

not different, I tried this first but it did not work, maybe I had another error in  
the template.

your is definitely the better solution

---

<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:** [14 June 2024 10:45 UTC](https://discourse.nodered.org/t/data-array-initial-value/88402/7 "2024-06-14T10:45:16Z")

</div>

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