How do I use observables with json data similar to angular2?

How-to Discussions
1

I’m learning Fuse and making comparisons with Ionic using a weather API to parse and display some simple data (https://www.wunderground.com/weather/api/d/docs - the example shows the JSON response).

In Ionic I would do something similar to this, where accessing various levels of the JSON response is really easy. But for the life of my I cannot get my head around doing the same with observables, despite reading the docs and looking at some examples. Can anyone please enlighten me?

getWeather(){
    return this.http.get(this.url)
    .map(res => res.json());
}


this.getData()  .subscribe(weather => {
        this.weather = weather.current_observation;
        });

<h3 class="desc">{{weather.display_location.full}}</h3>

<h3 class="desc">{{weather.temp_c}}</h3>
2

Hi, please provide a complete example of what you’re doing. It’s impossible to tell you what is wrong without seeing what you’ve done.

One thing though, you should not use .subscribe() like you do, it’s just a helper to forcefully trigger consumption of Observables that don’t have other subscribers. Since you’re probably using the resulting Observables in UX, you should not need .subscribe().

3

The code I posted was how I’d do it in another mobile app framework (Ionic). I’m trying to replicate it in Fuse, but I’m struggling to understand how to map the response data to observables which are then available to my UX.

The API I’m using is http://api.wunderground.com/api/99dfe35fcb7de1ee/conditions/q/CA/San_Francisco.json

I want to pull out a few things (like weather, temp_c, location).

4

I found this link (https://www.smashingmagazine.com/2017/05/fuse-native-cross-platform-apps/) which led me to this solution, but is this the best way?

<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");

		var currentWeather = Observable();
		

		fetch("http://api.wunderground.com/api/99dfe35fcb7de1ee/conditions/q/CA/San_Francisco.json")
		.then(function(response) {
			return response.json();
		})
		.then(function(responseObject) {
			currentWeather.value = {
				location: responseObject.current_observation.display_location.full,
				tempC: responseObject.current_observation.temp_c,
				forecast: responseObject.current_observation.weather
			};
		});


		module.exports = {
			currentWeather: currentWeather
         };

	</JavaScript>

	<Text ux:Class="MyText" Alignment="Center" />

	<StackPanel Alignment="Center">
		<MyText Value="{currentWeather.location}" />
		<MyText Value="{currentWeather.tempC}c" />
		<MyText Value="{currentWeather.forecast}" />
	</StackPanel>

</App>
5

Currently, yes - you need to use ES2015 approach and work with explicitly declared Observables. .map and other reactive operators return derived Observables, so a somewhat limited ES6 approach like in your initial snippet might work, but you have to get the syntax right.

That said, you’ll be happy to learn that there’s something new coming in near future: Models. For now, I suggest you stick to what we have in docs.

6

Thank you :slight_smile: