# Observable console output

**URL:** <https://forums.fusetools.com/t/observable-console-output/5671>\
**Category:** General\
**Created:** [October 29, 2017, 4:26pm UTC](https://forums.fusetools.com/t/observable-console-output/5671 "2017-10-29T16:26:35Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tom1](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@Tom1](https://forums.fusetools.com/u/Tom1)\
**Post date:** [October 29, 2017, 4:26pm UTC](https://forums.fusetools.com/t/observable-console-output/5671/1 "2017-10-29T16:26:35Z")

</div>

Hey guys back again. I have .js file where i am calculating total cost of a book but could access the object keys. i keep getting this output

```
    {"_origin":-27,"_subscribers":[],"_isProxy":false,"_values":[{"isbn":0012,"book":"John Doe","price":10,"quantity":1}]}

```

this is what I did on js file

```
   var data = Observable();
   var total = 0;

  function addItem(isbn, name, price, quantity)
 {
     var tempData = new Item(isbn, name, price, quantity);
     data.add(tempData);
     totalPrice(price,quantity);

};
    totalPrice(p,q){
     //console.log(p);
     //console.log(q);
    //don't know what goes here. I want to return total ( declared above). total = price * quantity
      }
```

---

<div class="post-metadata">

**Author:** ![jesusmartinoza](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jesusmartinoza/32/659_2.png) [@jesusmartinoza](https://forums.fusetools.com/u/jesusmartinoza)\
**Post date:** [October 29, 2017, 10:52pm UTC](https://forums.fusetools.com/t/observable-console-output/5671/2 "2017-10-29T22:52:23Z")

</div>

The first console output is because you are printing directly a observable instance

```auto
 var foo = Observable({"isbn":0012,"book":"John Doe","price":10,"quantity":1});
 
 console.log(JSON.stringify(foo)); //{"_origin":-12,"_subscribers":[],"_isProxy":false,"_values":[{"isbn":10,"book":"John Doe","price":10,"quantity":1}]}

 console.log(JSON.stringify(foo.value)); // {"isbn":10,"book":"John Doe","price":10,"quantity":1}

```

But in your case I suppose `addItem` is called from a UX event so I’m curious about what is receiving the `Item` instance. Could you provide where you call the `addItem` method?

---

<div class="post-metadata">

**Author:** ![Tom1](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@Tom1](https://forums.fusetools.com/u/Tom1)\
**Post date:** [October 30, 2017, 6:27pm UTC](https://forums.fusetools.com/t/observable-console-output/5671/3 "2017-10-30T18:27:49Z")

</div>

Thanks for clarifying on console output.

This is what I am calling addItem from UX. Whenever add button is pressed. it adds dynamic data.

```
  //example

  addItem(14002,"Tom books",5.99,2);
```

---

<div class="post-metadata">

**Author:** ![petterroea](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/petterroea/32/438_2.png) [@petterroea](https://forums.fusetools.com/u/petterroea)\
**Post date:** [October 30, 2017, 6:41pm UTC](https://forums.fusetools.com/t/observable-console-output/5671/4 "2017-10-30T18:41:05Z")

</div>

Tom;

I can’t totally get what isn’t working as intended. Could you post a fully working example that demonstrates your case? It seems like there’s some code missing.

---

<div class="post-metadata">

**Author:** ![Tom1](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@Tom1](https://forums.fusetools.com/u/Tom1)\
**Post date:** [October 30, 2017, 8:37pm UTC](https://forums.fusetools.com/t/observable-console-output/5671/5 "2017-10-30T20:37:55Z")

</div>

Here’s my minimal code production. I want to access data observable and calculate total cost for book. Also total cost change based on item added by users.

Main.ux

```
   <App>
			<JavaScript File="Main.js"/>
			<ScrollView>
			<StackPanel ItemSpacing="50">
			<Button Text="Add Item" Alignment="VerticalCenter">
			<Clicked Handler="{addButton}"/>
			</Button>
			<Button Text="Total Price" Alignment="VerticalCenter">
			<Clicked Handler="{calculatePrice}"/>
			</Button>

			<Text Value="Your Total: $ {total}" />

			<Each Items="{data}" >

			<Text Value="{isbn}" TextColor="#000"/>
			<Text Value="{name}" TextColor="#000"/>
			<Text Value="{price}" TextColor="#000"/>
			<Text Value="{quantity}" TextColor="#000"/>

			</Each>

			</StackPanel>
			</ScrollView>
			</App>

```

Main.js

```
                      var Observable = require('FuseJS/Observable');
			var data = Observable();
			var total = 0;
			function Item(isbn, name, price, quantity){
			    this.isbn = isbn;
			    this.name = name;
			    this.price = price;
			    this.quantity = quantity;
			}
			  function addItem(isbn, name, price, quantity)
			 {
			     var tempData = new Item(isbn, name, price, quantity);
			     data.add(tempData);

			};
			 function calculatePrice()
			 {
			 	//how to calculate total price??
			 	//lost here
			 	//need to calculate total price whenever user add item 
			 	//Total price = price * quantitiy;
			     
			  };

			 function addButton()
			 {	//summary
			 	//whenever user want to purchase the book and clicked on addButton. This 
                       will get triggered.
			 	//exclude product image
			 	//doesn't calculate total price
			    addItem(14002,"Tom books",5.99,2);
			    addItem(15002,"books",4.99,3);

			 }
			module.exports = {
				addItem:addItem,
				calculatePrice:calculatePrice,
				addButton:addButton,
				total:total,
				data:data
			};
```

---

<div class="post-metadata">

**Author:** ![jesusmartinoza](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jesusmartinoza/32/659_2.png) [@jesusmartinoza](https://forums.fusetools.com/u/jesusmartinoza)\
**Post date:** [October 30, 2017, 9:37pm UTC](https://forums.fusetools.com/t/observable-console-output/5671/6 "2017-10-30T21:37:05Z")

</div>

Ok, I have a workaround. First I change `total` to observable because it needs to be updated in the UI, and calculate the total using every element in the `data` list.

```auto
        var Observable = require('FuseJS/Observable');
        var data = Observable();
        var total = Observable(0);

        function Item(isbn, name, price, quantity){
            this.isbn = isbn;
            this.name = name;
            this.price = price;
            this.quantity = quantity;

            this.getTotal = function() {
                return quantity * price;
            }
        }
          function addItem(isbn, name, price, quantity)
         {
             var tempData = new Item(isbn, name, price, quantity);
             data.add(tempData);

        };
         function calculatePrice()
         {
            total.value = 0;
            data.forEach(function(b) {
                total.value += b.getTotal();
            })
         }

         function addButton()
         { //summary
            //whenever user want to purchase the book and clicked on addButton. This will get triggered.
            //exclude product image
            //doesn't calculate total price
            addItem(14002,"Tom books",5.99,2);
            addItem(15002,"books",4.99,3);

         }
        module.exports = {
            addItem:addItem,
            calculatePrice:calculatePrice,
            addButton:addButton,
            total:total,
            data:data
        };

```

---

<div class="post-metadata">

**Author:** ![Tom1](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@Tom1](https://forums.fusetools.com/u/Tom1)\
**Post date:** [October 30, 2017, 11:19pm UTC](https://forums.fusetools.com/t/observable-console-output/5671/7 "2017-10-30T23:19:50Z")

</div>

thanks. Woks perfectly. learning every day.

one question though. I did try to call addItem function from different .js file

this is what I did on my different .js file

```
var other = require('./Main.js);
//calling addItem function from Main.js

  other.addItem(14,"CS",4.99,3);

 //console output is: addItem is not a function

```

wonder what I did wrong here.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [October 31, 2017, 9:56am UTC](https://forums.fusetools.com/t/observable-console-output/5671/8 "2017-10-31T09:56:58Z")

</div>

@Tom: you can’t `require()` viewmodels. This has been a common mistake and has already been explained before. Please [start here](https://www.fusetools.com/community/forums/howto_discussions/global_observable_from_parent_to_children?page=1&highlight=168b12b0-bf30-43c3-a561-8c38ad2eb0df#post-168b12b0-bf30-43c3-a561-8c38ad2eb0df) and follow the links for details.

---

<div class="post-metadata">

**Author:** ![Tom1](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@Tom1](https://forums.fusetools.com/u/Tom1)\
**Post date:** [October 31, 2017, 4:50pm UTC](https://forums.fusetools.com/t/observable-console-output/5671/9 "2017-10-31T16:50:39Z")

</div>

Hmm. But I don’t understand require() on this fuse example. require() was used and invoked Context function in different .js

```
   Context.updateHike(hike.value.id, name.value, location.value, distance.value, rating.value, 
    comments.value);

```

> <https://github.com/fusetools/hikr/blob/master/Pages/EditHikePage.js>

Update: never mind. Now I know.