One of the things that I like about building Windows Store apps using Visual Studio 2012 is the availability of several rich and useful templates. One of my favorites is the Grid App template, which demonstrates how to build an app with a hub page listing grouped items in a ListView control, a group details page, listing information about each group, and an item details page, for information about specific items.

I chose to use the Grid app template in my MeetupPOI Starter Kit for my team’s API Mashup Starter Kits collection. You can download the whole set of starter kits here, or browse our Github site to grab individual starter kits. The starter kits are a work in progress, but each demonstrates the use of one or more APIs in a Windows Store app, and there are kits for both XAML/C# and HTML/JavaScript available. The remainder of the post discusses the first step in creating the starter kit, moving from sample data to live data from an API, in my case, the Meetup.com API.

The Grid app template works out of the box, thanks to the use of some simple sample data, which is created dynamically by the file data.js. This provides a nice example of abstracting the actual data functionality from your markup and script for your particular page, which is a good practice to follow.

One of the advantages of the abstraction provided by data.js is that you can go from sample data to live data with a few simple steps, thanks in part to the dynamic nature of JavaScript.

The data.js file may seem a little tricky to understand at first, so it may be worthwhile to take a look at some of the important points in data.js, and explain what they do.

##
Understanding Data.js

Some of the functions in data.js are pretty straightforward. For example, towards the end of the file, you’ll find a function called generateSampleData which, unsurprisingly, generates sample data as JavaScript objects, first creating an object representing the groups, then creating an object representing the items, associating each of the items with a particular group. So far, so good.

But how does generateSampleData get called? Well, like many of the built-in JavaScript files in the app templates you’ll use with Visual Studio, this file uses the immediately invoked function expression pattern, like so:

   1:  (function () {

   2:     // code in here is executed when the JavaScript file is loaded

   3:  })();

So at the time that the app loads data.js (which is referenced in default.html, which is the first page loaded by the app), the code in data.js creates a new WinJS.Binding.List object (which is the object used to bind data to a ListView control), sets up functions for grouping the items, and then calls generateSampleData, and then uses forEach to iterate over the resulting JavaScript data, and adding each item to the binding list.

Once that’s done, the data is ready to go. Because all this code is inside the IIFE function, it’s not visible to the outside world by default, so the next section of code takes care of that, by setting up a namespace and providing public names by which the grouped items, the groups, and various helper functions, can be accessed from outside data.js:

   1:  WinJS.Namespace.define("Data", {

   2:      items: groupedItems,

   3:      groups: groupedItems.groups,

   4:      getItemReference: getItemReference,

   5:      getItemsFromGroup: getItemsFromGroup,

   6:      resolveGroupReference: resolveGroupReference,

   7:      resolveItemReference: resolveItemReference

   8:  });

For the ListView control on the main page of the grid app template (groupedItems.html), the ListView is connected to the data via the following line from groupeditems.js:

   1:  listView.itemDataSource = Data.items.dataSource;

Bringing in Live Data

So how hard (or easy) is it to bring in live data with as little disruption as possible to the rest of the codebase? Pretty easy, it turns out, and I’ll show you, using the Meetup.com API (you’ll need to get your own API key if you want to try this).

We’re going to modify the existing data.js, so if you want to compare the two later, you may want to make a copy of the file before modifying it. Of course, if you’ve not done so already, you should start by opening Visual Studio 2012 (the free Express version for Windows 8 apps will do fine), and creating a new app based on the Grid app template.

Follow these steps to bring in live data from the Meetup.com API:

1. Open up data.js and delete lines 10-14 (the code that calls generateSampleData and iterates over the results):

   <strike>   1:      // TODO: Replace the data with your real data.</strike>

<strike>   2:      // You can add data from asynchronous sources whenever it becomes available.</strike>

<strike>   3:      generateSampleData().forEach(function (item) {</strike>

<strike>   4:          list.push(item);</strike>

<strike>   5:      });</strike>