无法将 JSON（从 WCFRest 返回）绑定到 HTML 表答案

【问题标题】：Unable to bind JSON (returning from WCFRest) to HTML table无法将 JSON（从 WCFRest 返回）绑定到 HTML 表
【发布时间】：2017-09-28 14:15:33
【问题描述】：

我创建了一个 WCFRestful 服务，它以以下格式填充 JSON 数据

{"GetEmployeesJSONResult":"[{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000},{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000},{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000},{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000},{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000},{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000}]"}

我正在尝试使用 Knockout 在 HTML 表格中显示此数据，但到目前为止未能成功。但是，硬编码的值会正确显示。

HTML 和淘汰赛

var HomeModel = function () {
        this.rows = ko.observableArray();
    };

    $(document).ready(function () {            

        $.ajax({
            method: "POST",
            url: 'http://localhost:1249/Service1.svc/GetJsonAll',
            contentType: "application/javascript",
            dataType: "jsonp",
            success: function (data) {                    
                //for (var x in data) {
                //    model.rows.push(data[x]);
                //}
                //model.rows(data);
                //console.log(model.rows);
                //var res = [{
                //    "Id": "1",
                //    "Name": "Mike",
                //    "Start_Date": "Sun 01/06/08",
                //    "Finish_Date": "Sun 01/06/08",
                //    "Salary": "Trainee"

                //}, {
                //    "Id": "2",
                //    "Name": "Jhon",
                //    "Start_Date": "Sun 01/06/08",
                //    "Finish_Date": "Sun 01/06/08",
                //    "Salary": "Trainee"
                //}, {
                //    "Id": "2",
                //    "Name": "Jhon",
                //    "Start_Date": "Sun 01/06/08",
                //    "Finish_Date": "Sun 01/06/08",
                //    "Salary": "Trainee"
                //}];
                console.log(data);
                var model = new HomeModel();
                //ko.applyBindings(model);
                ko.applyBindings({
                    rows: data.GetEmployeesJSONResult
                });
            }
        });
    });


<table>
        <thead>
            <tr>
                <th>Employee ID</th>
                <th>Name</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: rows">
            <tr>
                <!--<td data-bind="text: Id"></td>
                <td data-bind="text: Name"></td>
                <td data-bind="text: Salary"></td>-->
                <td>
                    <pre data-bind="text: JSON.stringify(ko.toJS($data))"></pre>
                </td>
                <td>
                    <pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>
                </td>
                <td>
                    <pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>
                </td>
            </tr>
        </tbody>
    </table>

有人可以帮帮我吗？我被严重卡住了。

【问题讨论】：

标签： javascript jquery html knockout.js wcf-rest

【解决方案1】：

查看Plunker

var data = {"GetEmployeesJSONResult":"[{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000},{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000},{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000},{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000},{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000},{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000}]"}

var HomeModel = function () {
        this.rows = ko.observableArray();
    };

  ko.applyBindings({
                    rows: JSON.parse(data.GetEmployeesJSONResult)
                });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" data-semver="3.1.1" data-require="jquery"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js"></script>
    
     <table>
        <thead>
            <tr>
                <th>Employee ID</th>
                <th>Name</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: rows">
            <tr>
                <td>
                    <pre data-bind="text: Id"></pre>
                </td>
                <td>
                    <pre data-bind="text: Name"></pre>
                </td>
                <td>
                    <pre data-bind="text: Salary"></pre>
                </td>
            </tr>
        </tbody>
    </table>

【讨论】：

非常感谢罗尼！ JSON.parse(data.GetEmployeesJSONResult) 成功了。你拯救了我的一天。

【解决方案2】：

只是在黑暗中开枪，你试过放吗

var HomeModel = function () {
        this.rows = ko.observableArray();
};

在$(document).ready(function () { }; 里面？您是否试图在它们进入 DOM 之前获取这些值？

【讨论】：

是的。已添加。
非常感谢您对此进行调查。 JSON.parse(data.GetEmployeesJSONResult) 成功了。