从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表中的结果。不知道我做错了什么。感谢您的任何帮助,您可以提供。
答
您的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>