How to short data form webservice with winjs? - winjs

Question

I have problems with grouped ListView or short group. i get data from webservice already but i don't know how to binding data to html template user behind code.
HTML:
<div class="listLayoutTopHeaderTemplate" data-win-control="WinJS.Binding.Template">
<div class="listLayoutTopHeaderTemplateRoot">
<div data-win-bind="innerHTML: title"></div>
</div>
</div>
<div id="listView"
class="win-selectionstylefilled"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemTemplate: select('.smallListIconTextTemplate'),
groupHeaderTemplate: select('.listLayoutTopHeaderTemplate'),
layout: { type: WinJS.UI.ListLayout, groupHeaderPosition: 'top'}}">
</div>
Winjs:
var myData = new WinJS.Binding.List([
{ title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "/images/fruits/60Banana.png" },
{ title: "Lavish Lemon Ice", text: "Sorbet", picture: "/images/fruits/60Lemon.png" },
]);
var grouped = myData.createGrouped(function (item) {
return item.title.toUpperCase().charAt(0);
}, function (item) {
return {
title: item.title.toUpperCase().charAt(0)
};
}, function (left, right) {
return left.charCodeAt(0) - right.charCodeAt(0);
});
listView.winControl.groupDataSource = grouped.groupDataSource;

Answer 1

You need to take whatever data you get from the web service, which is presumably JSON, and transfer that data into a WinJS.Binding.List that you can use as the ListView's data source. In the code you show, this is the myData variable, which you can initialize as empty (instead of using the shown data that's just from a sample). Iterating over your web service data, call the List's add method for each item. If the JSON you want to render already has an array, then parse that out and pass the array to the WinJS.Binding.List constructor.
Either way, you end up with a WinJS.Binding.List populated with the data from the service, which you can then give to the ListView for rendering.
There are fancier ways of working with data sources if you want to avoid obtaining the web service data and copying it all into an in-memory WinJS.Binding.List. For this I'll refer you to Chapter 7 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, specifically the section "Collection Control Data Sources" on page 380.