Question

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

CFBundleDisplayName = "LOCALIZED_APP_NAME";

这是我的jQuery代码：

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

我的HTML：

<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页面上显示的内容：

注意我在javascript中的这一行：
alert（“action：”+ item）;

它会显示如下警告消息：

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

Answer 1

您的JSON返回的项目不是集合，而是单个对象。所以你的每一个＆＃34;函数迭代对象的属性，而不是通过集合中的对象。这是您问题的简化版本（MCVE，这可能是您应该提交的问题代码）：

＆＃13;

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>');
});

＆＃13;

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

＆＃13;

您需要确定要循环的对象（如果需要循环）。您有一组操作，您的HTML表名为actions。也许您想循环遍历响应中返回的操作，并将它们添加到表中？

＆＃13;

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>');
});

＆＃13;

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

＆＃13;

从HTML5页面调用WebAPI

1 个答案: