# I can't recover the info in the js file

**URL:** https://discourse.nodered.org/t/i-cant-recover-the-info-in-the-js-file/9930
**Category:** General
**Created:** [9 April 2019 08:44 UTC](https://discourse.nodered.org/t/i-cant-recover-the-info-in-the-js-file/9930 "2019-04-09T08:44:55Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![trujillo](https://avatars.discourse-cdn.com/v4/letter/t/e9bcb4/32.png) [@trujillo](https://discourse.nodered.org/u/trujillo)
#### Post date: [9 April 2019 08:44 UTC](https://discourse.nodered.org/t/i-cant-recover-the-info-in-the-js-file/9930/1 "2019-04-09T08:44:55Z")

</div>

Hi, I'm deploying a node with and array like a default property but when I try to deploy the node I can't access to the info in the js file (I have a empty array there).

This is the definition:

```auto
defaults:{
            name: {value:""},
            ...
            fiware_attrs_array: {value:[]},
        },

```

Oneditprepare and oneditsave:

```auto
oneditprepare: function(){

            var node = this;
            $("#node-input-fiware_attrs_array").editableList({
                addItem: function(container, i, attr){
                    if (node.fiware_attrs_array.length > 0){
                        for(var x=0; x < this.fiware_attrs_array.length; x++){
                            var item = this.item[x];
                            console.log(item);
                        }
                    }else if (node.fiware_attrs_array.length == 0){
                        var newItem = $('<li>', {for:"node-input-attr"+i}).appendTo(container);
                        var name = $('<input/>', {id:"node-input-attr-name"+i, type: "text"}).appendTo(newItem);
                        var type = $('<input/>', {id:"node-input-attr-type"+i, type: "text"}).appendTo(newItem);
                        var value = $('<input/>', {id:"node-input-attr-value"+i, type: "text"}).appendTo(newItem);
                    }
                },
                removeItem: function(container){

                },
                sortable: true,
                removable: true
            });
        },
        oneditsave: function(){
            var attrs = $("#node-input-fiware_attrs_array").editableList('items');
            var node = this;
            var array = [];
            attrs.each(function(i){
                var attr = $(this);
                var attrName = attr.find('#node-input-attr-name'+i).val();
                var attrType = attr.find('#node-input-attr-type'+i).val();
                var attrValue = attr.find('#node-input-attr-value'+i).val();
                var newAttr = {};
                newAttr['name'] = attrName;
                newAttr['type'] = attrType;
                newAttr['value'] = attrValue;
                array.push(newAttr);
            });
            node.fiware_attrs_array = array;
            console.log("Attributes: " + JSON.stringify(node.fiware_attrs_array));
        }

```

And the html element:

```auto
<div class="form-row node-input-fiware_attrs_array_row">
        <ol id="node-input-fiware_attrs_array">
    </div>

```

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [10 April 2019 22:12 UTC](https://discourse.nodered.org/t/i-cant-recover-the-info-in-the-js-file/9930/2 "2019-04-10T22:12:19Z")

</div>

Hi Jose (@trujillo),

First of all I think you have rewrite your oneditprepare, because otherwise I couldn't display any loaded values:

```auto
        oneditprepare: function(){
            var node = this;
            
            // Specify an editableList, add all its available functions (addItem, ...)
            $("#node-input-fiware_attrs_array").editableList({
                addItem: function(container, i, attr){
                    // Create a new row
                    var newItem = $('<li>', {for:"node-input-attr"+i}).appendTo(container);
                    
                    // Show 3 input fields in the new row
                    var nameInput = $('<input/>', {id:"node-input-attr-name"+i, type: "text"}).appendTo(newItem);
                    var typeInput = $('<input/>', {id:"node-input-attr-type"+i, type: "text"}).appendTo(newItem);
                    var valueInput = $('<input/>', {id:"node-input-attr-value"+i, type: "text"}).appendTo(newItem);
                    
                    // Show the specified values in those 3 input fields
                    nameInput.val(attr.name);
                    typeInput.val(attr.type);
                    valueInput.val(attr.value);
                },
                removeItem: function(container){

                },
                sortable: true,
                removable: true
            });
            
            // Fill the editableList with all data from the fiware_attrs_array available in this node
            for(var i = 0; i < this.fiware_attrs_array.length; i++) {
                var attr = this.fiware_attrs_array[i];
                $("#node-input-fiware_attrs_array").editableList('addItem',{name:attr.name, type:attr.type, value:attr.value});
            }
        },

```

However then there is still your original question, why the array isn't being passed to the server. Very weird. I have used something similar already a couple of times, but here it indeed doesn't work.

And it is even not functioning in the client itself:

1. I change the values on the config screen:

2. When I press the 'Done' button, the array seems to be correctly stored inside the node (in **oneditsave** ):

3. But when I open the config screen again, the array entry is messed up (in **oneditprepare** ):

I assume it must be something very stupid, but I cannot see at the moment what is wrong 🥴  
Bart

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [10 April 2019 22:20 UTC](https://discourse.nodered.org/t/i-cant-recover-the-info-in-the-js-file/9930/3 "2019-04-10T22:20:23Z")

</div>

Don't use `node-input-fiware_attrs_array` as the id of the editableList.

The editor will be looking for an input with that id to get the updated value from.... which it cannot do as it's a editableList.

As you are doing all the work to populate and save the list in your `onedit*` functions, you can give the `<ol>` element any id you want... Just not the one you are using.

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [10 April 2019 22:48 UTC](https://discourse.nodered.org/t/i-cant-recover-the-info-in-the-js-file/9930/4 "2019-04-10T22:48:14Z")

</div>

Thanks @knolleary,  
Had been looking at Jose's code over-and-over again, but hadn't noticed that the editableList element had the same id as the array in the node. Damn ...

@trujillo,  
When I change the editableList id to e.g. _"node-input-editablelist"_, then the array indeed survives reopening the config screen. And it also arrives at the server side when deploying:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/7aceff6a0ac1f303c319ecd2a27600d8172ff7c8.png)

Here is my test code (with {name:'a', type:'b', value:'c'} as default test value):

```auto
<script type="text/javascript">
    RED.nodes.registerType('test-array',{
        category: 'performance',
        color: '#E9967A',
        defaults: {
            name: {value:""},
            fiware_attrs_array: {value:[{name:'a', type:'b', value:'c'}]}              
        },        
        inputs:1,
        outputs:1,
        icon: "fluid.png",
        label: function() {
            return this.name||"Array";
        },
        oneditprepare: function(){
            var node = this;
            
            // Specify an editableList, add all its available functions (addItem, ...)
            $("#node-input-editablelist").editableList({
                addItem: function(container, i, attr){
                    // Create a new row
                    var newItem = $('<li>', {for:"node-input-attr"+i}).appendTo(container);
                    
                    // Show 3 input fields in the new row
                    var nameInput = $('<input/>', {id:"node-input-attr-name"+i, type: "text"}).appendTo(newItem);
                    var typeInput = $('<input/>', {id:"node-input-attr-type"+i, type: "text"}).appendTo(newItem);
                    var valueInput = $('<input/>', {id:"node-input-attr-value"+i, type: "text"}).appendTo(newItem);
                    
                    // Show the specified values in those 3 input fields
                    nameInput.val(attr.name);
                    typeInput.val(attr.type);
                    valueInput.val(attr.value);
                },
                removeItem: function(container){

                },
                sortable: true,
                removable: true
            });
            
            // Fill the editableList with all data from the fiware_attrs_array available in this node
            for(var i = 0; i < this.fiware_attrs_array.length; i++) {
                var attr = this.fiware_attrs_array[i];
                $("#node-input-editablelist").editableList('addItem',{name:attr.name, type:attr.type, value:attr.value});
            }
        },
        oneditsave: function(){
            var attrs = $("#node-input-editablelist").editableList('items');
            var node = this;
            var array = [];
            attrs.each(function(i){
                var attr = $(this);
                var attrName = attr.find('#node-input-attr-name'+i).val();
                var attrType = attr.find('#node-input-attr-type'+i).val();
                var attrValue = attr.find('#node-input-attr-value'+i).val();
                var newAttr = {};
                newAttr['name'] = attrName;
                newAttr['type'] = attrType;
                newAttr['value'] = attrValue;
                array.push(newAttr);
            });
            node.fiware_attrs_array = array;
        }
    });
</script>

<script type="text/x-red" data-template-name="test-array">
    <div class="form-row node-input-editablelist-row">
        <ol id="node-input-editablelist">
    </div>
    </br>
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
</script>

```

---

<div class="post-metadata">

### Author: ![trujillo](https://avatars.discourse-cdn.com/v4/letter/t/e9bcb4/32.png) [@trujillo](https://discourse.nodered.org/u/trujillo)
#### Post date: [23 April 2019 09:58 UTC](https://discourse.nodered.org/t/i-cant-recover-the-info-in-the-js-file/9930/5 "2019-04-23T09:58:28Z")

</div>

Thanks a lot! The error was the id attribute of ol element. It have to be different of node-input-fiware\_attrs\_array