WinJS Need help binding json response to listview - json

Question

I have been messing with the code trying to get json to bind with winJS listview.
At the moment I an getting an error Exception: Cannot use 'in' operator to search for '0' in [{"$id":"1","Distance":0.083516275210499508,"Jo............
Need some help, thanks
WinJS.xhr({
url: "http://api.secondyearvisajob.com.au/api/jobs/GetNearActiveJobs",
type: "POST",
responseType: "",
data: JSON.stringify({ LocationId: 23555, kms: 10 }),
headers: { "content-type": "application/json" }
}).done(
function completed(request) {
alert(request) //[object: Object]
alert(JSON.stringify(request.response)) // my data
alert(JSON.parse(request.response)) //[object: Object],[object: Object]
alert(request.statusText)
WinJS.Namespace.define("Sample.ListView", { data: new WinJS.Binding.List(request.response) });
},
function error(request) {
alert(request)
}
);
WinJS.UI.processAll()
<div class="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
<div class="smallListIconTextItem">
<div class="smallListIconTextItem-Detail">
<h4 data-win-bind="textContent: Distance"></h4>
</div>
</div>
</div>
<div id="listView"
class="win-selectionstylefilled"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: itemDataSource :Sample.ListView.data.dataSource,
itemTemplate: select('.smallListIconTextTemplate'),
selectionMode: 'none',
tapBehavior: 'none',
layout: { type: WinJS.UI.ListLayout }
}">
</div>

Answer 1

There are a couple things happening here in your code.
First of all, request.response from your REST call is a JSON string, not an array as is required to initialize a new WinJS.Binding.List. The exception you're seeing is coming from passing a string. So you need to use JSON.parse(request.response) to get that array:
var arr = JSON.parse(request.response);
var list = new WinJS.Binding.List(arr);
Next, because WinJS.xhr is an asynchronous API, what's probably true is that WinJS.UI.processAll is attempting to initialize the ListView before you have the response and before you've even defined the Sample.ListView namespace. To correct this, omit the itemDataSource property from the HTML, and set that property directly in code. That is, continuing from the above:
var listview = document.getElementById("listView");
listview.winControl.itemDataSource = list.dataSource;
And the data-win-options attribute in HTML looks like this:
data-win-options="{
itemTemplate: select('.smallListIconTextTemplate'),
selectionMode: 'none',
tapBehavior: 'none',
layout: { type: WinJS.UI.ListLayout }
}"
That should help you move forward.
P.S. Just a suggestion, when posting questions about exceptions it's always helpful to identify exactly where in the code the exception is raised. That'll get you faster and better responses, as otherwise I had to put your code into a project to find that information.