Fetching JSON

Fetching JSON

A tiny example of how to download a JSON file over HTTP, parse it and populate the user interface based on the contents.

<App Background="#eee">
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />
            <Grid ColumnCount="2">
                    var Observable = require("FuseJS/Observable");

                    var data = Observable();

                        .then(function(response) { return response.json(); })
                        .then(function(responseObject) { data.replaceAll(responseObject); });

                    module.exports = {
                        data: data
                <Each Items="{data}">
                    <DockPanel Height="120" Margin="10">
                        <Panel DockPanel.Dock="Top" Margin="10" Height="30">
                            <Rectangle Layer="Background" CornerRadius="10" Color="#fff"/>
                            <Text Value="{colorName}" TextAlignment="Center" Alignment="Center" />

                        <Rectangle Layer="Background" CornerRadius="10" Color="{hexValue}"/>

The UX is pretty straight forward, we have an Each bound to {data} which represents the color array in the JSON file. For each entry in the file it creates a panel with color and text fetched from the JSON data:

The JavaScript simply fetches the JSON file and exposes it through the Observable data variable which is exposed to the UX code.

The JSON file looks like this:

        "colorName":"Deep purple",
        "colorName":"Light blue",