使用 knockoutjs 绑定来自 JSON 对象的数据 - Asp.net MVC

Posted 2023-03-27

【中文标题】使用 knockoutjs 绑定来自 JSON 对象的数据 - Asp.net MVC

【英文标题】：binding data from JSON object with knockoutjs - Asp.net MVC

【发布时间】：2020-05-05 18:56:00

【问题描述】：

在嵌套 JSON 对象的情况下，我无法从返回的 JSON 中获取数据。

HTML 代码如下：

<div>
    <h2>List Employee</h2>
    <br />
    <table class="table table-bordered" >
        <thead>
            <tr>
                <td>Id</td>
                <td>Name</td>
                <td>Age</td>
            </tr>
        </thead>
        <tbody data-bind="foreach: Employees">
            <tr>
                <td data-bind="text: Id"></td>
                <td data-bind="text: Name"></td>
                <td data-bind="text: Age"></td>
            </tr>
        </tbody>
    </table>
</div>

然后KnockoutJS

function ProductViewModel() 
    var self = this;
    self.Employees = ko.observableArray();`

    $.ajax(
        url: '/Home/GetEmployee',
        cache: false,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        data: ,
        success: function (data) 
            self.Employees(ko.mapping.fromJS(data));
        
    )
 
var viewModel = new ProductViewModel();
ko.applyBindings(viewModel);`

控制器：

public JsonResult GetEmployee()

    var employee = db.Employee.ToList();
    return Json(new  data = employee , JsonRequestBehavior.AllowGet);

Json 对象：

`"data":["Id":1,"Name":"Andrew","Age":25,"Id":2,"Name":"John","Age":28,"Id":3,"Name":"Layla","Age":24,"Id":4,"Name":"Mia","Age":26]`

结果错误：

任何人都可以改进我的代码，拜托...

【问题讨论】：

@Phong，感谢编辑。

【参考方案1】：

您的data 在对象中，因此您必须对其进行解析：

const myData = JSON.parse(data);
self.Employees(ko.mapping.fromJS(myData.data)); //in data is your array

如果您只需要显示数据，则无需映射即可：self.Employees(myData.data);