从 HTML5 页面调用 WebAPI答案

【问题标题】：Call WebAPI from HTML5 page从 HTML5 页面调用 WebAPI
【发布时间】：2016-02-01 12:40:10
【问题描述】：

我正在尝试在 HTML5 页面中绑定来自 WebAPI 调用的 json 响应。不知道我在哪里。 WebAPI 返回这个 json：

{
  "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 中的这一行：
alert("action:" + item);

它显示这样的警报消息：

我只是想在 html 表格中显示结果。不知道我做错了什么。感谢您提供的任何帮助。

【问题讨论】：

标签： jquery html asp.net-web-api

【解决方案1】：

您的 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 表被命名为操作。也许您想遍历响应中返回的操作，并将它们添加到表中？

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>

【讨论】：