JSON Add new Item

General
1

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

}
};

2

Hello Arnold!

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

3

DetailsView.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

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

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

5

Hey Arnold!

Youu should read more about Observables and how to create an Observable list. Read this to understand how to update list or delete items from the list.

Hope this helps.