# Observable into observable array

**URL:** <https://forums.fusetools.com/t/observable-into-observable-array/5391>\
**Category:** General\
**Created:** [July 2, 2017, 10:24am UTC](https://forums.fusetools.com/t/observable-into-observable-array/5391 "2017-07-02T10:24:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gabson](https://avatars.discourse-cdn.com/v4/letter/g/a6a055/32.png) [@Gabson](https://forums.fusetools.com/u/Gabson)\
**Post date:** [July 2, 2017, 10:24am UTC](https://forums.fusetools.com/t/observable-into-observable-array/5391/1 "2017-07-02T10:24:44Z")

</div>

Hello !

I am working on a “online-shop” project using Fuse and an homemade API, in order to learn how to use fuse.  
The part I am having troubles is the “cart”, I have a file with an observables and I add a product whenever the add button is clicked.

When I use product.name in the UX no problem; But cannot use it in the javascript file.

```auto
// Here with product I Get the name, price etc ...

var product = productView.Parameter.flatMap( function(param) {
	//console.log("Current product id " + param._id);
	return (param);
});

//what I want to do is add this product "object" to my observable (list), as show below

function addtobucket() {
	dataStore.paniers.add(this.product);

	console.log("Content of the cart JSON --> " + JSON.stringify(dataStore.paniers)); // NULL because this.product is undefined

}

```

I have tried many differents ways to add this product, following recommendations etc … Like make a copy with “var copie = Object.assign({}, obj);”

What am I missing ?

---

<div class="post-metadata">

**Author:** ![Gabson](https://avatars.discourse-cdn.com/v4/letter/g/a6a055/32.png) [@Gabson](https://forums.fusetools.com/u/Gabson)\
**Post date:** [July 2, 2017, 10:28am UTC](https://forums.fusetools.com/t/observable-into-observable-array/5391/2 "2017-07-02T10:28:56Z")

</div>

Well … I fixed It by doing :

```auto
function addtobucket(arg) {

	dataStore.paniers.add(productView.Parameter.flatMap( function(param) {
		return (param);
	}));

	console.log("panier contient en JSON --> " + JSON.stringify(dataStore.paniers));
}

```

```auto
<ScrollView>
	<StackPanel ItemSpacing="10" Margin="10">
	<Text Value="PANIER" Alignment="Center" FontSize="16"/>
		<Each Items="{paniers}">
			<DockPanel Padding="10">
				<Panel Layer="Background" Clicked="{productDetails}" Color="#EEE" HitTestMode="LocalBounds"/>
				<ListIcon Dock="Left" Color="{color}" HitTestMode="None"/>
				<Label Value="{name}" HitTestMode="None"/>
				<Label Value="{price}€" Alignment="Right"/>

				<Image Dock="Right" File="../Assets/info.png" BoxSizing="FillAspect" Aspect="1"
					Clicked="{mvCart}" Color="#ccc"/>
			</DockPanel>
		</Each>
		<basic.Button Text="Payer ou réserver les produits" Clicked="{showDialog}" />
		<basic.Button Text="Faire de ce panier une whishlist" Clicked="{login}" />
	</StackPanel>
	</ScrollView>

//and the product details function : 

function productDetails(e) {
	console.log("click on : " + e.data.name ); // print "click on undefined
}

```

Thanks for your help