knockout.jsforeach在嵌套json数据上第一次循环后失败



im通过web api调用中的一些嵌套json进行循环,并将数据绑定到表。foreach在第一个循环后失败。

这是来自web api调用的json

  [{"$id":"1","JobID":1,"JobsListID":1,"BookingID":2,"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"},{"$id":"3","JobID":4,"JobsListID":1,"BookingID":2,"TimeAllowed":18,"TimeTaken":22,"Comments":"Some comments","Status":"complete","Notes":null,"TimeStarted":"2014-11-06T10:30:00","Difficulty":5,"CompleteDate":"2014-11-06T10:52:00","booking":null,"jobs_mechanics":[],"jobslist":{"$ref":"2"},"timessheets":[]}],"jobscategory":null,"model_jobslist":[]},"timessheets":[]},{"$ref":"3"},{"$id":"4","JobID":9,"JobsListID":2,"BookingID":2,"TimeAllowed":null,"TimeTaken":null,"Comments":null,"Status":"new","Notes":null,"TimeStarted":null,"Difficulty":5,"CompleteDate":null,"booking":null,"jobs_mechanics":[],"jobslist":{"$id":"5","JobsListID":2,"JobCategoryID":2,"Description":"Fix or Replace Radiator","Name":"Fix Radiator","jobs":[{"$ref":"4"}],"jobscategory":null,"model_jobslist":[]},"timessheets":[]},{"$id":"6","JobID":2,"JobsListID":3,"BookingID":2,"TimeAllowed":30,"TimeTaken":27,"Comments":"Some comments","Status":"complete","Notes":null,"TimeStarted":"2014-11-05T15:00:00","Difficulty":1,"CompleteDate":"2014-11-05T15:27:00","booking":null,"jobs_mechanics":[],"jobslist":{"$id":"7","JobsListID":3,"JobCategoryID":3,"Description":"Replace Door","Name":"Door","jobs":[{"$ref":"6"},{"$id":"8","JobID":3,"JobsListID":3,"BookingID":2,"TimeAllowed":40,"TimeTaken":40,"Comments":"Some comments","Status":"complete","Notes":null,"TimeStarted":"2014-11-05T14:05:00","Difficulty":3,"CompleteDate":"2014-11-05T14:45:00","booking":null,"jobs_mechanics":[],"jobslist":{"$ref":"7"},"timessheets":[]},{"$id":"9","JobID":7,"JobsListID":3,"BookingID":2,"TimeAllowed":null,"TimeTaken":null,"Comments":"Some comments","Status":"new","Notes":null,"TimeStarted":null,"Difficulty":2,"CompleteDate":null,"booking":null,"jobs_mechanics":[],"jobslist":{"$ref":"7"},"timessheets":[]}],"jobscategory":null,"model_jobslist":[]},"timessheets":[]},{"$ref":"8"},{"$ref":"9"},{"$id":"10","JobID":5,"JobsListID":4,"BookingID":2,"TimeAllowed":70,"TimeTaken":68,"Comments":"Some comments","Status":"complete","Notes":null,"TimeStarted":"2014-11-06T10:30:00","Difficulty":2,"CompleteDate":"2014-11-07T12:23:00","booking":null,"jobs_mechanics":[],"jobslist":{"$id":"11","JobsListID":4,"JobCategoryID":4,"Description":"Weld and patch old exhaust","Name":"Weld Exhaust","jobs":[{"$ref":"10"}],"jobscategory":null,"model_jobslist":[]},"timessheets":[]},{"$id":"12","JobID":6,"JobsListID":5,"BookingID":2,"TimeAllowed":50,"TimeTaken":50,"Comments":"Some comments","Status":"complete","Notes":null,"TimeStarted":"2014-11-08T15:40:00","Difficulty":3,"CompleteDate":"2014-11-08T16:30:00","booking":null,"jobs_mechanics":[],"jobslist":{"$id":"13","JobsListID":5,"JobCategoryID":5,"Description":"Replace current brakes pads","Name":"New Brake Pads","jobs":[{"$ref":"12"},{"$id":"14","JobID":8,"JobsListID":5,"BookingID":2,"TimeAllowed":null,"TimeTaken":null,"Comments":"Some comments","Status":"new","Notes":null,"TimeStarted":null,"Difficulty":1,"CompleteDate":null,"booking":null,"jobs_mechanics":[],"jobslist":{"$ref":"13"},"timessheets":[]},{"$id":"15","JobID":10,"JobsListID":5,"BookingID":2,"TimeAllowed":50,"TimeTaken":48,"Comments":null,"Status":"complete","Notes":null,"TimeStarted":"2014-11-08T09:30:00","Difficulty":4,"CompleteDate":"2014-11-08T10:18:00","booking":null,"jobs_mechanics":[],"jobslist":{"$ref":"13"},"timessheets":[]}],"jobscategory":null,"model_jobslist":[]},"timessheets":[]},{"$ref":"14"},{"$ref":"15"}]

这是输出

作业ID作业列表ID1 1

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

它适用于第一个作业并绑定数据,然后停止???

我在调试器中得到这个消息消息:JobID没有定义

脚本代码

                       var ViewModel = function () {
                  var self = this;
    self.Jobs = ko.observableArray();
    self.search = ko.observableArray();
    self.GJobs = function (search) {
        GetJobs(self.search);
    }
    self.GetMenu = function (JobID) {
        GetMenu(JobID);
    }
    function GetJobs(search) {
        $.ajax({
            type: "GET",
            url: 'api/mechanicphone',
            data: { reg: search },
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                self.Jobs(data);
            },
            error: function (data) {
                $('#MechMobile').html('<h3>Error in retrieval</h3>');
            }
        });
    }

只需从web api调用中查看您的JSON,您就有一个问题——在第二个作业的位置,您有以下JSON:

{  
  "$ref":"3"
}

尝试使用此JSON:

[
{
  "$id":"1",
  "JobID":1,
  "JobsListID":1,
  "BookingID":2,
  "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"
        },
        {
           "$id":"3",
           "JobID":4,
           "JobsListID":1,
           "BookingID":2,
           "TimeAllowed":18,
           "TimeTaken":22,
           "Comments":"Some comments",
           "Status":"complete",
           "Notes":null,
           "TimeStarted":"2014-11-06T10:30:00",
           "Difficulty":5,
           "CompleteDate":"2014-11-06T10:52:00",
           "booking":null,
           "jobs_mechanics":[
           ],
           "jobslist":{
              "$ref":"2"
           },
           "timessheets":[
           ]
        }
     ],
     "jobscategory":null,
     "model_jobslist":[
     ]
  },
  "timessheets":[
  ]
  },
  {
  "$id":"4",
  "JobID":9,
  "JobsListID":2,
  "BookingID":2,
  "TimeAllowed":null,
  "TimeTaken":null,
  "Comments":null,
  "Status":"new",
  "Notes":null,
  "TimeStarted":null,
  "Difficulty":5,
  "CompleteDate":null,
  "booking":null,
  "jobs_mechanics":[
  ],
  "jobslist":{
     "$id":"5",
     "JobsListID":2,
     "JobCategoryID":2,
     "Description":"Fix or Replace Radiator",
     "Name":"Fix Radiator",
     "jobs":[
        {
           "$ref":"4"
        }
     ],
     "jobscategory":null,
     "model_jobslist":[
     ]
  },
  "timessheets":[
  ]
  },
  {
  "$id":"6",
  "JobID":2,
  "JobsListID":3,
  "BookingID":2,
  "TimeAllowed":30,
  "TimeTaken":27,
  "Comments":"Some comments",
  "Status":"complete",
  "Notes":null,
  "TimeStarted":"2014-11-05T15:00:00",
  "Difficulty":1,
  "CompleteDate":"2014-11-05T15:27:00",
  "booking":null,
  "jobs_mechanics":[
  ],
  "jobslist":{
     "$id":"7",
     "JobsListID":3,
     "JobCategoryID":3,
     "Description":"Replace Door",
     "Name":"Door",
     "jobs":[
        {
           "$ref":"6"
        },
        {
           "$id":"8",
           "JobID":3,
           "JobsListID":3,
           "BookingID":2,
           "TimeAllowed":40,
           "TimeTaken":40,
           "Comments":"Some comments",
           "Status":"complete",
           "Notes":null,
           "TimeStarted":"2014-11-05T14:05:00",
           "Difficulty":3,
           "CompleteDate":"2014-11-05T14:45:00",
           "booking":null,
           "jobs_mechanics":[
           ],
           "jobslist":{
              "$ref":"7"
           },
           "timessheets":[
           ]
        },
        {
           "$id":"9",
           "JobID":7,
           "JobsListID":3,
           "BookingID":2,
           "TimeAllowed":null,
           "TimeTaken":null,
           "Comments":"Some comments",
           "Status":"new",
           "Notes":null,
           "TimeStarted":null,
           "Difficulty":2,
           "CompleteDate":null,
           "booking":null,
           "jobs_mechanics":[
           ],
           "jobslist":{
              "$ref":"7"
           },
           "timessheets":[
           ]
        }
     ],
     "jobscategory":null,
     "model_jobslist":[
     ]
  },
  "timessheets":[
  ]
  },
  {
  "$id":"10",
  "JobID":5,
  "JobsListID":4,
  "BookingID":2,
  "TimeAllowed":70,
  "TimeTaken":68,
  "Comments":"Some comments",
  "Status":"complete",
  "Notes":null,
  "TimeStarted":"2014-11-06T10:30:00",
  "Difficulty":2,
  "CompleteDate":"2014-11-07T12:23:00",
  "booking":null,
  "jobs_mechanics":[
  ],
  "jobslist":{
     "$id":"11",
     "JobsListID":4,
     "JobCategoryID":4,
     "Description":"Weld and patch old exhaust",
     "Name":"Weld Exhaust",
     "jobs":[
        {
           "$ref":"10"
        }
     ],
     "jobscategory":null,
     "model_jobslist":[
     ]
  },
  "timessheets":[
  ]
  },
  {
  "$id":"12",
  "JobID":6,
  "JobsListID":5,
  "BookingID":2,
  "TimeAllowed":50,
  "TimeTaken":50,
  "Comments":"Some comments",
  "Status":"complete",
  "Notes":null,
  "TimeStarted":"2014-11-08T15:40:00",
  "Difficulty":3,
  "CompleteDate":"2014-11-08T16:30:00",
  "booking":null,
  "jobs_mechanics":[
  ],
  "jobslist":{
     "$id":"13",
     "JobsListID":5,
     "JobCategoryID":5,
     "Description":"Replace current brakes pads",
     "Name":"New Brake Pads",
     "jobs":[
        {
           "$ref":"12"
        },
        {
           "$id":"14",
           "JobID":8,
           "JobsListID":5,
           "BookingID":2,
           "TimeAllowed":null,
           "TimeTaken":null,
           "Comments":"Some comments",
           "Status":"new",
           "Notes":null,
           "TimeStarted":null,
           "Difficulty":1,
           "CompleteDate":null,
           "booking":null,
           "jobs_mechanics":[
           ],
           "jobslist":{
              "$ref":"13"
           },
           "timessheets":[
           ]
        },
        {
           "$id":"15",
           "JobID":10,
           "JobsListID":5,
           "BookingID":2,
           "TimeAllowed":50,
           "TimeTaken":48,
           "Comments":null,
           "Status":"complete",
           "Notes":null,
           "TimeStarted":"2014-11-08T09:30:00",
           "Difficulty":4,
           "CompleteDate":"2014-11-08T10:18:00",
           "booking":null,
           "jobs_mechanics":[
           ],
           "jobslist":{
              "$ref":"13"
           },
           "timessheets":[
           ]
        }
     ],
     "jobscategory":null,
     "model_jobslist":[
     ]
  },
  "timessheets":[
  ]
 }
 ]

我无法用您提供的代码复制您的问题。你能提供一个例子吗?

您是如何将JSON与viewModel进行映射的?看看映射插件如果你试图将json添加到一个可观察的数组中,唯一的绑定将是添加/删除作业表单KO对象属性Jobs,这就是你想要的吗?

最新更新