# JSON  Add new Item

**URL:** <https://forums.fusetools.com/t/json-add-new-item/6154>\
**Category:** General\
**Created:** [March 12, 2018, 9:09pm UTC](https://forums.fusetools.com/t/json-add-new-item/6154 "2018-03-12T21:09:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arnold\_Krieger](https://avatars.discourse-cdn.com/v4/letter/a/d07c76/32.png) [@Arnold\_Krieger](https://forums.fusetools.com/u/Arnold_Krieger)\
**Post date:** [March 12, 2018, 9:09pm UTC](https://forums.fusetools.com/t/json-add-new-item/6154/1 "2018-03-12T21:09:36Z")

</div>

Hello,  
i need help , i can´t put new Item in JSON. In the function change() i push it but in function getBasket() it is lose.

var Observable = require(“FuseJS/Observable”);  
var Backend = require(“script.js”);  
var basket;  
var test=Observable();  
var json;  
var PicFile=Observable();  
PicFile=“assets/shopping.png”;  
var data=Observable();

basket=[  
{  
“Name”:"!..",  
},  
{  
“Name”:"…",  
}  
];

data = [  
{  
“colorName”:“CocaCola”,  
“hexValue”:"#FFFFFF"  
}  
]

module.exports = {  
data: data,  
PicFile:PicFile,

```
change:function(arg){
       json='{"Name":"'+arg.data.colorName+'"}';

```

console.log(json);  
basket.push({“Name”:“Peter”});  
basket.push(json);  
},

getBasket:function(){  
test.replaceAll(basket);  
console.log(test);  
return test;  
},  
goBack:function(){  
router.goBack();  
},  
goTo:function(){  
router.goto(“details”);  
},

goToBasket:function(){  
router.push(“basket”);

}  
};

---

<div class="post-metadata">

**Author:** ![Arturs](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/arturs/32/582_2.png) [@Arturs](https://forums.fusetools.com/u/Arturs)\
**Post date:** [March 13, 2018, 12:14pm UTC](https://forums.fusetools.com/t/json-add-new-item/6154/2 "2018-03-13T12:14:09Z")

</div>

Hello Arnold!

You should post minimal reproduction project, so we can copy-paste it and see where is the problem.

---

<div class="post-metadata">

**Author:** ![Arnold\_Krieger](https://avatars.discourse-cdn.com/v4/letter/a/d07c76/32.png) [@Arnold\_Krieger](https://forums.fusetools.com/u/Arnold_Krieger)\
**Post date:** [March 13, 2018, 12:30pm UTC](https://forums.fusetools.com/t/json-add-new-item/6154/3 "2018-03-13T12:30:49Z")

</div>

DetailsView.xml

```xml
<DefaultPage ux:Class="DetailsView">
	<string ux:Property="name" />
<Router ux:Dependency="router" />
	<JavaScript File="DetailsView.js" />

	<Panel Dock="Top">
			<Grid Alignment="Top" Height="50" ColumnCount="2" Background="#7f5ce6">

<Button Text="" Alignment="Left">
    <Image File="../../assets/back.png"/>
     <Clicked>
                <Callback Handler="{goBack}" />
            </Clicked>
</Button>
<Button Text="" Alignment="Right">
    <Image File="{PicFile}"/>
    <Clicked>
                <Callback Handler="{goToBasket}" />
            </Clicked>
</Button>
			</Grid>		
		</Panel>

	<WhiteText ux:Class="Name" Color="#fff7" Margin="0,0,0,0" />

	<DockPanel Height="560" Margin="0">
						<Panel DockPanel.Dock="Top" Margin="0" Height="30">
							<Rectangle Layer="Background" CornerRadius="10" Color="#fff"/>
							<Text Value="{name}" TextAlignment="Center" Alignment="Center" />
						</Panel>
							
					</DockPanel>

	<DockPanel Margin="0,80,0,0">
		<StatusBarBackground Dock="Top" />
		<BottomBarBackground Dock="Bottom" />
		<ScrollView >
			<Grid ColumnCount="1">
				
				<Each Items="{data}">
					<DockPanel Height="120" Margin="10">
						<Panel DockPanel.Dock="Top" Margin="10" Height="30">
							<Rectangle Layer="Background" CornerRadius="10" Color="#fff">
							 <Stroke Width="1" Color="#000000"/>
   									</Rectangle>
							<Text Value="{colorName}" TextAlignment="Center" Alignment="Center" />
						</Panel>
<Panel Alignment="Left"> 
	<Image File="../../assets/shopping.png"/>
</Panel>

<Text Value="1 Liter" TextAlignment="Center" Alignment="Top" />
<Button Text="Buy Now" Alignment="Right" Margin="0,36,15,14" Background="#009000">
</Button>
						<Rectangle Layer="Background" CornerRadius="10" Color="{hexValue}"/>

						<Clicked Handler="{change}" />
					</DockPanel>
				</Each>
			</Grid>
		</ScrollView>
	</DockPanel>

</DefaultPage>

```

DetailsView.js

```javascript
var Observable = require("FuseJS/Observable");
var Backend = require("script.js");
var basket=Observable();
var test=Observable();
var json=Observable();
var PicFile=Observable();
var data=Observable();

PicFile="assets/shopping.png";

 basket=[ 
    {
        "Name":"!...",
        "Menge":"1Liter",
        "Preis":"2€",
    },
    {
        "Name":"......",
         "Menge":"2Liter",
        "Preis":"3€",
    }
    ];

 data = [
    {
        "colorName":"CocaCola",
        "hexValue":"#FFFFFF"
    }
]

module.exports = {
		data: data,
		PicFile:PicFile,
        json:json,
        basket:basket,

	change:function(arg){
           json='{"Name":"'+arg.data.colorName+'"}';

//basket.push({"Name":"Peter"});
basket.push(json);
    },

getBasket:function(){

   test.replaceAll(basket);
   console.log(test);
    return test;
},
goBack:function(){
	router.goto("liste");
},
goToBasket:function(){
router.push("basket");
}
};

```

---

<div class="post-metadata">

**Author:** ![Arnold\_Krieger](https://avatars.discourse-cdn.com/v4/letter/a/d07c76/32.png) [@Arnold\_Krieger](https://forums.fusetools.com/u/Arnold_Krieger)\
**Post date:** [March 13, 2018, 12:33pm UTC](https://forums.fusetools.com/t/json-add-new-item/6154/4 "2018-03-13T12:33:59Z")

</div>

If i call getBasket() i get 2 Items, but i push more item in change function()

---

<div class="post-metadata">

**Author:** ![Arturs](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/arturs/32/582_2.png) [@Arturs](https://forums.fusetools.com/u/Arturs)\
**Post date:** [March 14, 2018, 12:42pm UTC](https://forums.fusetools.com/t/json-add-new-item/6154/5 "2018-03-14T12:42:09Z")

</div>

Hey Arnold!

Youu should read more about [Observables](https://www.fusetools.com/docs/fusejs/observable-api#observable-api) and how to create an Observable list. Read [this](https://www.fusetools.com/docs/fusejs/observable-api#observable-lists) to understand how to update list or delete items from the list.

Hope this helps.