从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页面

回答

相关问题