WinJS "forEach" 未定义

Question

我正在使用导航模板开发 Windows 应用程序（winjs），我要做的就是当我在 home.html 页面打开应用程序时，应加载申请人/候选人的列表。这是我正在处理的代码。但它让我痛苦的是 forEach 是未定义的

  (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.
    }
});}

和html代码

    <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>

这是我生成json数据的php

    <?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;  ?>

如果有人可以提供帮助，那将是一个很大的帮助。

Answer 1

这是我正在处理的代码。但它让我觉得 forEach 是未定义的。

从您的 php 代码中，您返回一个 Json 对象：$response['rows'] = $rows;。

所以 JSON 对象有一个属性 rows，它是一个数组。但是在你的 JS 代码中， 您使用JSON.parse(xhr.response).d 检索数组，其中d 属性不存在。

要解决此问题，您只需将var applicants=JSON.parse(xhr.response).d; 修改为以下代码：

var applicants = JSON.parse(xhr.response).rows;

我检查了您发布的链接。它没有谈论数据源的样子。所以我认为JSON.parse(xhr.response).d 是那个博客中的一个数据数组。