Observable console output

General
1

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
      }
2

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

 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?

3

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);
4

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.

5

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
			};
6

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.

        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
        };
7

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.

8

@Tom: you can’t require() viewmodels. This has been a common mistake and has already been explained before. Please start here and follow the links for details.

9

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);

Update: never mind. Now I know.