從HTML5調用WebAPI頁面

我想在HTML5頁面中綁定來自WebAPI調用的json響應。不知道我在哪裏。在返回的WebAPI這JSON：從HTML5調用WebAPI頁面

{ 
 
    "ID": 1, 
 
    "Date": "2015-10-26T00:00:00", 
 
    "Status": "Initiated", 
 
    "Action": { 
 
    "VerificationActionTypeID": 0, 
 
    "VerificationActionType": null, 
 
    "VerificationActionTakenID": 0, 
 
    "VerificationActionTaken": null, 
 
    "VerficationActionCreateDate": "0001-01-01T00:00:00", 
 
    "EmailAddress": null, 
 
    "Notes": null 
 
    }, 
 
    "Actions": [ 
 
    { 
 
     "VerificationActionTypeID": 0, 
 
     "VerificationActionType": "Perform Rinse Flowcell", 
 
     "VerificationActionTakenID": 0, 
 
     "VerificationActionTaken": "Skip", 
 
     "VerficationActionCreateDate": "2015-10-26T10:04:05.093", 
 
     "EmailAddress": null, 
 
     "Notes": null 
 
    } 
 
    ] 
 
}

這是我的jQuery代碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  
 
<script type="text/javascript"> 
 
    var uri = 'http://localhost/Custom.WebAPI/api/action?verificationid=1'; 
 
    var $result = $('#Result'); 
 
    var msg; 
 
    $(document).ready(function() {    
 
     $.getJSON(uri) 
 
      .done(function (data) { 
 
       $.each(data, function (key, item) { 
 
        alert("action: " + item); 
 
        $('#actions tbody').append('<tr><td>' + item.ID + '</td><td>' + item.Status + '</td></tr>'); 
 
       }); 
 
      }) 
 
      .fail(function (jqXHR, textStatus, err) {      
 
       var error = $.parseJSON(jqXHR.responseText); 
 
       msg = "Failed to get action data Error message is " + error.message;      
 
       alert("Message: " + msg); 
 
      }); 
 
    });   
 
</script>

我的HTML：

<body> 
 
    <aside id="data"> 
 
     <div id="Result"> </div> 
 
     <table id="actions"> 
 
      <thead> 
 
      <tr> 
 
       <td>ID</td> 
 
       <td>Status</td> 
 
      </tr> 
 
      </thead> 
 
      <tbody></tbody> 
 
     </table> 
 
    </aside> 
 
</body>

這是顯示在HTML頁面上：

注意這條線我在JavaScript：
警報（「行動：」 +項目）;

它顯示警報消息是這樣的：

我只是想顯示在HTML表中的結果。不知道我做錯了什麼。感謝您的任何幫助，您可以提供。

來源

2015-11-01 obautista

您的JSON返回的項目不是集合，而是單個對象。所以你的「每個」函數遍歷對象的屬性，而不是通過集合中的對象。這是你的問題的一個簡化版本（MCVE，這可能是你應該提交的代碼，你的問題）：

var data = JSON.parse('{"ID":1,"Date":"2015-10-26T00:00:00","Status":"Initiated","Action":{"VerificationActionTypeID":0,"VerificationActionType":null,"VerificationActionTakenID":0,"VerificationActionTaken":null,"VerficationActionCreateDate":"0001-01-01T00:00:00","EmailAddress":null,"Notes":null},"Actions":[{"VerificationActionTypeID":0,"VerificationActionType":"Perform Rinse Flowcell","VerificationActionTakenID":0,"VerificationActionTaken":"Skip","VerficationActionCreateDate":"2015-10-26T10:04:05.093","EmailAddress":null,"Notes":null}]}'); 
 

 
$.each(data, function(key, item) { 
 
    alert("action: " + item); 
 
    $('#actions tbody').append('<tr><td>' + item.ID + '</td><td>' + item.Status + '</td></tr>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="actions"> 
 
    <tbody> 
 
    </tbody> 
 
</table>

你需要決定什麼對象要循環（如果甚至需要循環）。您有一組操作，並且您的HTML表格被命名爲actions。也許你想循環響應中返回的動作，並將它們添加到表中？

var data = JSON.parse('{"ID":1,"Date":"2015-10-26T00:00:00","Status":"Initiated","Action":{"VerificationActionTypeID":0,"VerificationActionType":null,"VerificationActionTakenID":0,"VerificationActionTaken":null,"VerficationActionCreateDate":"0001-01-01T00:00:00","EmailAddress":null,"Notes":null},"Actions":[{"VerificationActionTypeID":0,"VerificationActionType":"Perform Rinse Flowcell","VerificationActionTakenID":0,"VerificationActionTaken":"Skip","VerficationActionCreateDate":"2015-10-26T10:04:05.093","EmailAddress":null,"Notes":null}]}'); 
 
    
 
$.each(data.Actions, function (key, item) { 
 
    alert("action id: " + item.VerificationActionTypeID); 
 
    $('#actions tbody').append('<tr><td>' + item.VerificationActionTypeID + '</td><td>'+item.VerficationActionCreateDate+'</td></tr>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="actions"> 
 
    <thead> 
 
     <th>Action Type Id</th><th>VerficationActionCreateDate</th> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

來源

2015-11-01 15:52:47 mason

從HTML5調用WebAPI頁面

回答

相關問題