kann nicht JSON binden (Rückkehr aus WCFRest) zu HTML-Tabelle

Question

ich einen WCFRestful Service erstellt haben, das Format

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

in folgenden JSON Daten auffüllt Ich versuche, diese Daten in HTML-Tabelle anzuzeigen Knockout mit , aber bisher nicht geschafft. Der fest codierte Wert wird jedoch korrekt angezeigt.

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

Könnte jemand mir bitte helfen? Ich bin fest stecken.

Answer 1

prüfen 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>

Answer 2

Nur ein Schuss im Dunkeln, haben Sie

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

innerhalb des $(document).ready(function() { }; versucht setzen? Versuchen Sie, die Werte zu erhalten, bevor sie sich im DOM befinden?