数据绑定嵌套 json 数据使用来自网络的敲除 api asp.net mvc

Question

我正在尝试通过网络 api 调用对一些嵌套的 json 进行数据绑定。我是否需要为嵌套数据创建另一个 observable 或在之后进行 knockout 处理。我有一个从 api 返回的作业对象，该作业有一个作业列表。我想绑定 jobId 和 joblistID。我只是在寻找一种简单的方法来做到这一点 json code

[
    {
        "$id":"1",
        "JobID":1,
        "JobsListID":1,
        "BookingID":1,
        "TimeAllowed":20,
        "TimeTaken":22,
        "Comments":"Some comments",
        "Status":"complete",
        "Notes":null,
        "TimeStarted":"2014-11-04T09:00:00",
        "Difficulty":1,
        "CompleteDate":"2014-11-04T09:22:00",
        "booking":null,
        "jobs_mechanics":[],
        "jobslist": {
            "$id":"2",
            "JobsListID":1,
            "JobCategoryID":1,
            "Description":"Change Tyres",
            "Name":"Tyres",
            "jobs": [
                {"$ref":"1"}
            ],
            "jobscategory":null,
            "model_jobslist":[]
        },
        "timessheets":[]
    }
]

html

                      <table class="table table-bordered table-hover">
          <tr>
      <th>Job ID</th>
           <th>JobList ID</th>

     </tr>
        <tbody data-bind="foreach: Jobs">
    <tr>
        <td data-bind="text: JobID"></td>
    </tr>

工作列表 ID 或名称或任何来自工作列表去这里只是为了
了解如何显示嵌套数据

                  </td>
               </tr>
             </table>



  script code 
           <script>
var ViewModel = function () {
    var self = this;
    self.Jobs = ko.observableArray();
    self.error = ko.observable();


    var JobsApi = 'http://localhost:54155/api/mechanicphone';

    function ajaxHelper(uri, method, data) {
        self.error(''); // Clear error message
        return $.ajax({
            type: method,
            url: uri,
            dataType: 'json',
            contentType: 'application/json',
            data: data ? JSON.stringify(data) : null
        }).fail(function (jqXHR, textStatus, errorThrown) {
            self.error(errorThrown);
        });
    }
    function getAllJobs() {
        ajaxHelper(JobsApi, 'GET').done(function (data) {
            self.Jobs(data);
        });
    }

    getAllJobs();


};


ko.applyBindings(new ViewModel());

Answer 1

您只需使用 foreach，然后使用 jobslist.JobsListID 获取 joblistId，如下所示：

<table>
    <thead>
        <tr>
            <th>Job ID</th>
            <th>JobList ID</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Jobs">
        <tr>
            <td data-bind="text: JobID"></td>
            <td data-bind="text: jobslist.JobsListID"></td>
        </tr>
    </tbody>
</table>

JsFiddle

数据绑定嵌套 json 数据使用来自网络的敲除 api asp.net mvc

data bind nested json data using knockout from web api asp.net mvc

json

asp.net-mvc-4

asp.net-web-api

knockout.js