無法綁定JSON（從WCFRest返回）到HTML表格

我已經創建了一個WCFRestful服務其填充在以下格式無法綁定JSON（從WCFRest返回）到HTML表格

{"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}]"}

我試圖來顯示使用敲除在HTML表格這個數據JSON數據，但沒有做到這一點。但是，硬編碼值會正確顯示。

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>

可能有人請幫助我嗎？我很困難。

來源

2017-05-01 Ashwin Masarkar

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

來源

2017-05-01 05:21:18 RonyLoud

非常感謝Rony！ JSON.parse（data.GetEmployeesJSONResult）訣竅。你拯救了我的一天。 –

在黑暗中只是一個鏡頭，你有沒有試圖把

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

的$(document).ready(function() { };裏面？你想在DOM之前獲取值嗎？

來源

2017-05-01 05:20:45

是。它被添加。 –

非常感謝您對此進行調查。 JSON.parse（data.GetEmployeesJSONResult）訣竅。 –

無法綁定JSON（從WCFRest返回）到HTML表格

回答

相關問題