javascript - 无法将 JSON(从 WCFRest 返回)绑定(bind)到 HTML 表

Question

我创建了一个 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 和 knockout

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>

有人可以帮我吗？我陷入了困境。

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