Why its drawing new boxes every time after "fetch"?

How-to Discussions
1

Hi, Why its drawing new boxes instead of changing only data in the first box?

Screenshot

Thanks for help.

<App>
	<iOS.StatusBarConfig Style="Light" />
	<Android.StatusBarConfig Color="#7f5ce6" />
	<JavaScript>
	var Observable = require("FuseJS/Observable");
	var Timer = require("FuseJS/Timer");

	var bitbay = Observable();
	var errorMessage = Observable();

	function pobierzDane() {

		fetch("https://bitbay.net/API/Public/BTCPLN/ticker.json")
		.then(function(result) {
			if (result.status !== 200) {
				errorMessage.value = "Wystąpi bąd: " + result.status;
				return;
			}
			result.json().then(function(data) {
				var item = data;
				bitbay.add(item);
			});
		}).catch(function(error) {
			errorMessage.value = "O nie! Wystąpi bląd z BitBay";
		});
	}

	Timer.create(function() {
		pobierzDane();
	}, 20000, true);

	module.exports = {
		bitbay: bitbay,
		errorMessage: errorMessage
	};
	</JavaScript>

	<StackPanel>
		<Each Items="{bitbay}">
			<DockPanel Margin="16,8,16,0">
				<Rectangle Height="65" Color="White" CornerRadius="3">
					<Grid Rows="1*" Columns="1.3*, 1*" Background="#fff">
						<StackPanel>
							<Text Value="BitBay" />
							<Text Value="{last} zł" />
						</StackPanel>
					</Grid>
					<Shadow Distance="2"/>
				</Rectangle>
			</DockPanel>
		</Each>
	</StackPanel>
</App>
2

Because you are adding with .add() to the observable every time. Try .clear() first.

3

Yes, it works :slight_smile:
Thank you.