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">
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />
        <ScrollView>
            <Grid ColumnCount="2">
                <JavaScript>
                    var Observable = require("FuseJS/Observable");

                    var data = Observable();

                    fetch('http://az664292.vo.msecnd.net/files/ZjPdBhWNdPRMI4qK-colors.json')
                        .then(function(response) { return response.json(); })
                        .then(function(responseObject) { data.value = responseObject; });

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

                        <Rectangle Layer="Background" CornerRadius="10" Color="{hexValue}"/>
                    </DockPanel>
                </Each>
            </Grid>
        </ScrollView>
    </DockPanel>
</App>

The UX is pretty straight forward, we have an Each bound to {data.colorsArray} 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:

{
    "colorsArray":[{
            "colorName":"Red",
            "hexValue":"#F44336"
        },
        {
            "colorName":"Pink",
            "hexValue":"#E91E63"
        },
        {
            "colorName":"Purple",
            "hexValue":"#9C27B0"
        },
        {
            "colorName":"Deep purple",
            "hexValue":"#673AB7"
        },
        {
            "colorName":"Indigo",
            "hexValue":"#3F51B5"
        },
        {
            "colorName":"Blue",
            "hexValue":"#2196F3"
        },
        {
            "colorName":"Light blue",
            "hexValue":"#03A9F4"
        },
        {
            "colorName":"Cyan",
            "hexValue":"#00BCD4"
        }
    ]
}