# Derived Observable: cannot read property

**URL:** <https://forums.fusetools.com/t/derived-observable-cannot-read-property/7554>\
**Category:** How-to Discussions\
**Created:** [December 11, 2018, 1:35pm UTC](https://forums.fusetools.com/t/derived-observable-cannot-read-property/7554 "2018-12-11T13:35:31Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [December 11, 2018, 1:35pm UTC](https://forums.fusetools.com/t/derived-observable-cannot-read-property/7554/1 "2018-12-11T13:35:31Z")

</div>

**Purpose: Create dynamically UI `TextInputs`.**

Given the following code, I’m trying to create some `TextInput` fields based on a JSON object. The JSON holds the names and the captions/placeholders which should be used to render the `TextInputs`. The code does render as wished but I can’t create the Observables described in the JSON `name` -\> ‘serial’ and ‘model’. Fuse reports _cannot read property ‘serial’_ when I try to get the value of `database.dbFields.serial.value`

```
<App>
    <JavaScript>
        var Observable = require('FuseJS/Observable');

        var fields = Observable();
        var database = Observable();

        
        var json = {
            "settings": [
                { 
                    dBfields: [
                        {"name": "serial", "caption": "SERIAL"},
                        {"name": "model", "caption": "MODEL"},
                    ]
                }   
            ]   
        };

        fields.replaceAll(json.settings);

        database = fields.flatMap(function(val){
            return val;
        });
        
        module.exports = {
            fields: fields,
            database: database,
            saveNewItem: saveNewItem
        };

        function saveNewItem(arg) {
            // Here goes the call to a API (PHP) wich saves 'name' and 'model' to a dB
            // console.log reports: cannot read property...                
           console.log(database.dbFields.serial.value);
        }

    </JavaScript>

    <ClientPanel>
        <StackPanel Margin="24,24,24,24">
            <Each Items="{database.dBfields}">
                <Text Value="{caption}" />
                <MyTextInput Value="{name}" PlaceholderText="{caption}" />
            </Each>
        </StackPanel>
    </ClientPanel>

    <Panel Alignment="Bottom" Margin="0,0,0,50">
        <MyButton Text="Salva" Clicked="{saveNewItem}" />
    </Panel>

    <!-- ========================================================================== -->
    <Panel ux:Class="MyButton" HitTestMode="LocalBounds" Color="#25a" >
        <string ux:Property="Text" />
        <Text Value="{ReadProperty Text}" Color="#fff" Alignment="Center" Margin="30,15,30,15" />
        <WhilePressed>
            <Change this.Color="#138" Duration="0.05" DurationBack=".2" />
        </WhilePressed>
    </Panel>

    <TextInput ux:Class="MyTextInput" FontSize="20" PlaceholderColor="#ccc" Padding="5" Height="32">
        <Rectangle Layer="Background" CornerRadius="3">
            <Stroke Width="1" Color="#CCCCCC" />
            <SolidColor Color="White" />
        </Rectangle>
    </TextInput>
    
</App>

```

Expanding the `Each` the expected result shoud be;

```
<MyTextInput Value="{serial}" PlaceholderText="SERIAL" />
<MyTextInput Value="{model}" PlaceholderText=MODEL" />

```

where `serial` and `model` are the values of the JSON keys `name`.  
In this way I may read/write the two `TextInputs` and create dynamically as many `TextInputs` as the dB fields has (as I would like to ‘bulid’ the UX interface dynamically, not with a number of fix Input fields).

---

<div class="post-metadata">

**Author:** ![1212khd](https://avatars.discourse-cdn.com/v4/letter/1/8baadc/32.png) [@1212khd](https://forums.fusetools.com/u/1212khd)\
**Post date:** [December 12, 2018, 3:45am UTC](https://forums.fusetools.com/t/derived-observable-cannot-read-property/7554/2 "2018-12-12T03:45:29Z")

</div>

Hi. I think that database.dbFields has two property. name, caption.

try console.log(JSON.stringify(database.dbFields));

---

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [December 12, 2018, 8:11am UTC](https://forums.fusetools.com/t/derived-observable-cannot-read-property/7554/3 "2018-12-12T08:11:55Z")

</div>

Hallo,

```
console.log(JSON.stringify(database.dbFields)); 

```

returns `null`.

---

<div class="post-metadata">

**Author:** ![1212khd](https://avatars.discourse-cdn.com/v4/letter/1/8baadc/32.png) [@1212khd](https://forums.fusetools.com/u/1212khd)\
**Post date:** [December 12, 2018, 3:04pm UTC](https://forums.fusetools.com/t/derived-observable-cannot-read-property/7554/4 "2018-12-12T15:04:21Z")

</div>

I think database is array. So you should use like database.getAt(0).dbFields.

If you want to make fields and database the same, use database = fields.

And you should use like {“name”: Observable(“serial”), “captuon”: Observable(“Serial”)}.

Property vriable in Observable is not Observable.

I will test your code tomorrow at the office and give you the correct answer. 🙂

---

<div class="post-metadata">

**Author:** ![1212khd](https://avatars.discourse-cdn.com/v4/letter/1/8baadc/32.png) [@1212khd](https://forums.fusetools.com/u/1212khd)\
**Post date:** [December 12, 2018, 11:14pm UTC](https://forums.fusetools.com/t/derived-observable-cannot-read-property/7554/5 "2018-12-12T23:14:31Z")

</div>

I try next code.

```
    function saveNewItem(arg) {
        // Here goes the call to a API (PHP) wich saves 'name' and 'model' to a dB
        // console.log reports: cannot read property...                
       console.log("DB: " + JSON.stringify(database));
       console.log("fields: " + JSON.stringify(fields));
       console.log(database.getAt(0).dBfields[0].name);
    }

```

And got next message.

```
DB: {"_origin":-30,"_subscribers":[{"version":2,"active":true}],"_isProxy":true,"_values":[{"dBfields":[{"name":"serial","caption":"SERIAL"},{"name":"model","caption":"MODEL"}]}],"_subscriptionWatchers":[{"watcherId":14}],"_beganSubscriptions":true}
fields: {"_origin":-27,"_subscribers":[{"version":2,"active":true},{"version":2,"active":true}],"_isProxy":false,"_values":[{"dBfields":[{"name":"serial","caption":"SERIAL"},{"name":"model","caption":"MODEL"}]}],"_beganSubscriptions":true}
serial

```

settings is Observable. So I use Observable.getAt(position number). And dBfields isn’t Observable. Just array. So I use dBfields[0].

---

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [December 13, 2018, 11:46am UTC](https://forums.fusetools.com/t/derived-observable-cannot-read-property/7554/6 "2018-12-13T11:46:33Z")

</div>

Thank you for taking time to help me. Now I understand.

But if my purpose is to create dynamically a number of UI `TextInputs` based on the JSON, how I can get the value of `serial`? When the user enters some data into the TextInput how I get its value?

```
database.getAt(0).dBfields[0].name.value

```

returns `null`.

`serial` should be an Observable (`var serial = Observable()`) and it shoud be `exported` to be reactive in the UX. How I can set a JSON value as it is `serial` to be an Observable?

Thank you.

---

<div class="post-metadata">

**Author:** ![1212khd](https://avatars.discourse-cdn.com/v4/letter/1/8baadc/32.png) [@1212khd](https://forums.fusetools.com/u/1212khd)\
**Post date:** [December 13, 2018, 12:46pm UTC](https://forums.fusetools.com/t/derived-observable-cannot-read-property/7554/7 "2018-12-13T12:46:31Z")

</div>

Hi.

If you don’t want to increase number of textinput playing app, it doesn’t need to use Obsevable.

try this code:

```
var database = {dBfields:[{name: Observable("serial"), caption: Observable("SERIAL"}]};
console.log(database.dBfields[0].name.value;

```

If it doesn’t change playing app, it doesn’t need to use Observable.

---

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [December 13, 2018, 2:09pm UTC](https://forums.fusetools.com/t/derived-observable-cannot-read-property/7554/8 "2018-12-13T14:09:11Z")

</div>

Hallo! I get:

```
TypeError: Cannot read property '0' of undefined

```

And YES, the number of `TextInput` may increase: its number is set by the JSON which should ‘describe’ the fields that should be rendered in the UX. This is why I’m trying to set a ‘unlimited’ number of Observables based on the values of the JSON (in this case `serial` and `model`). As said, the purpose is to display ‘dynamically’ a number of `TextInputs` according to the fields contained a the database which is not known.

---

<div class="post-metadata">

**Author:** ![1212khd](https://avatars.discourse-cdn.com/v4/letter/1/8baadc/32.png) [@1212khd](https://forums.fusetools.com/u/1212khd)\
**Post date:** [December 14, 2018, 12:30am UTC](https://forums.fusetools.com/t/derived-observable-cannot-read-property/7554/9 "2018-12-14T00:30:48Z")

</div>

Check Observable API  
[https://fuseopen.com/docs/fusejs/observable-api.html](https://fuseopen.com/docs/fusejs/observable-api.html)

In your code, fields is Observable.  
In this case, you should use fields.add(something).  
and access using fields.getAt(index).

I think that caption doesn’t need Observable.  
So, try this code:

```
<App>
<JavaScript>
    var Observable = require('FuseJS/Observable');

    var fields = Observable();
    // var database = Observable();

    
    var json = {
        "settings": [
            { 
                dBfields: [
                    {"name": "serial", "caption": "SERIAL"},
                    {"name": "model", "caption": "MODEL"},
                ]
            }   
        ]   
    };

    fields.replaceAll(json.settings);

    var database = Observable();
    database.add({dBfields: Observable()});
    database.getAt(0).dBfields.add({name: Observable("serial"), caption: "SERIAL"});
    database.getAt(0).dBfields.add({name: Observable("model"), caption: "MODEL"});
    console.log(JSON.stringify(database.getAt(0).dBfields));
    
    module.exports = {
        fields: fields,
        database: database,
        saveNewItem: saveNewItem
    };

    function saveNewItem(arg) {
        // Here goes the call to a API (PHP) wich saves 'name' and 'model' to a dB
        // console.log reports: cannot read property...                
       console.log(JSON.stringify(database.getAt(0).dBfields.getAt(0).name.value));
    }

</JavaScript>

<ClientPanel>
    <StackPanel Margin="24,24,24,24">
        <Each Items="{database.dBfields}">
            <Text Value="{caption}" />
            <MyTextInput Value="{name}" PlaceholderText="{caption}" />
        </Each>
    </StackPanel>
</ClientPanel>

<Panel Alignment="Bottom" Margin="0,0,0,50">
    <MyButton Text="Salva" Clicked="{saveNewItem}" />
</Panel>

<!-- ========================================================================== -->
<Panel ux:Class="MyButton" HitTestMode="LocalBounds" Color="#25a" >
    <string ux:Property="Text" />
    <Text Value="{ReadProperty Text}" Color="#fff" Alignment="Center" Margin="30,15,30,15" />
    <WhilePressed>
        <Change this.Color="#138" Duration="0.05" DurationBack=".2" />
    </WhilePressed>
</Panel>

<TextInput ux:Class="MyTextInput" FontSize="20" PlaceholderColor="#ccc" Padding="5" Height="32">
    <Rectangle Layer="Background" CornerRadius="3">
        <Stroke Width="1" Color="#CCCCCC" />
        <SolidColor Color="White" />
    </Rectangle>
</TextInput>

```

---

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [December 14, 2018, 12:49pm UTC](https://forums.fusetools.com/t/derived-observable-cannot-read-property/7554/10 "2018-12-14T12:49:55Z")

</div>

Thank you very much for taking your time to help me, but I’m thinking to give up. Thanks to your suggestion this is partially working:

```
var json = {
    dBfields: [
        {"name": "serial", "caption": "SERIAL"},
        {"name": "model", "caption": "MODEL"},
    ]
};

fields.replaceAll(json.dBfields);

database.add({dBfields: Observable()});

fields.forEach(function(items) {
    database.getAt(0).dBfields.add({name: Observable(items.name), caption: items.caption});
});

module.exports = {
    fields: fields,
    database: database,
    saveNewItem: saveNewItem
};

function saveNewItem(arg) {
    database.forEach(function(items) {
        console.log(JSON.stringify(items.dBfields.getAt(0).name.value));
    });
}

```

The matter now is that I’m not able to read the values of the `TextInputs` as

```
items.dBfields.getAt(0).name.value

```

is getting only the first one (due to `getAt(0)`) but if I change it to:

```
items.dBfields.getAt(i).name.value
i++;

```

it will still return only the first one and it won’t loop (i = 0 -\> i = 1 -\> etc.). I really don’t understand.

But a part all the above posts, as said, my purpose is to add to the UI a undetermined number of `TextInputs` which are described by a JSON or whatever kind of data that can be loaded by the app before the UI is drawn. These `TextInputs` must be reactive as they will be populated by data fetched from a dB and will be used to write data to a dB. Any idea how to create `TextInputs` dynamically?

Thank very much.