WinJS "forEach" Undefined - json

Question

am working on windows app(winjs) with navigation template, all am trying to do is when i open the app at the home.html page list of applicants/candidates should be loaded. here is my code i was working on. but it throes me with forEach is undefined
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/startpage/startpage.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
var titlesListGrouped = new WinJS.Binding.List().createGrouped(
function (i) { return i.ApplicantName.charAt(0).toUpperCase(); },
function (i) { return { firstLetter: i.ApplicantName.charAt(0).toUpperCase() }; }
);
var list = q("#ApplicantListView").winControl;
list.itemDataSource = titlesListGrouped.dataSource;
list.itemTemplate = q("#ApplicantTemplate");
list.groupDataSource = titlesListGrouped.groups.dataSource;
list.groupHeaderTemplate = q("#headertemplate");
WinJS.xhr({ url: "http://localhost/applicants/processing/getapplicant.php", })
.then(function (xhr) {
var applicants = JSON.parse(xhr.response).d;
applicants.forEach(function (i) {
var item = {
ApplicantId: i.ApplicantId,
ApplicantName: i.ApplicantName,
clickFunction: function (args) { WinJS.Navigation.navigate("/pages/details/details.html", item); }
};
item.clickFunction.supportedForProcessing = true;
titlesListGrouped.push(item);
});
});
},
unload: function () {
// TODO: Respond to navigations away from this page.
},
updateLayout: function (element) {
/// <param name="element" domElement="true" />
// TODO: Respond to changes in layout.
}
});}
and the html code
<section class="page-section" aria-label="Main content" role="main">
<div id="headerTemplate" data-win-control="WinJS.Binding.Template">
<div>
<p data-win-bind="innerText:firstLetter"></p>
</div>
</div>
<div id="ApplicantTemplate" data-win-control="WinJS.Binding.Template">
<div data-win-bind="onclick:clickFunction">
<div class="appId" data-win-bind="innerText:ApplicantId"></div><br />
<div class="appName" data-win-bind="innerText:ApplicantName"></div>
</div>
</div>
<div id="ApplicantListView"
data-win-control="WinJS.UI.ListView"></div>
</section>
and this is my php which generates json data
<?php
header('Allow-Control-Allow-Origin:*');
$database = mysqli_connect('localhost','root','','tech_m');
$query = "SELECT * from `applicant_table`";
$rs = mysqli_query($database, $query);
while($assoc = mysqli_fetch_assoc($rs)){
//echo "Access Granted";
$ApplicantId = $assoc['app_id'];
$ApplicantName = $assoc['app_name'];
$rows[] = array('ApplicantId' =>$ApplicantId ,'ApplicantName' =>$ApplicantName );
}
$response['rows'] = $rows;
$encodedfile = json_encode($response);
echo $encodedfile; ?>
please if anyone could help on this, it would be a great help.

Answer 1

here is my code i was working on. but it throws me with forEach is undefined.
From your php codes, you return a Json object: $response['rows'] = $rows;.
So the JSON object has a property rows, which is an array. But in your JS codes,
you retrieve the arrary using JSON.parse(xhr.response).d, in which the d property didn't exist.
To fix the problem, you can simply modify var applicants=JSON.parse(xhr.response).d; to below codes:
var applicants = JSON.parse(xhr.response).rows;
I checked the link you posted. It didn't talk about the how the dataSource look like. So I think JSON.parse(xhr.response).d is a data array in that blog.