WEB API + ASP.NET trying to display data from WEB.API in json format
Question
I have been trying to pull in information from my web API into my application. Currently i am just trying to pull in data not submit it yet. The API is working and running as a service on my system.
It is returning data in json format an example of the data returned by the WEB API.
[
{
"$id": "1",
"id": "6c32e378-0f06-45da-9dda-0515c813cd5d",
"application_name": "FDB INTERFACE",
"description": "Interface for FDB decision support",
"active": true,
"tbl_update_header": []
},
{
"$id": "2",
"id": "58f68624-3803-43ff-b866-0a507ea85459",
"application_name": "HPM",
"description": "Helix Health Practice Manager",
"active": true,
"tbl_update_header": []
},
This is my page just to try and get the some data to display
<html>
<head>
<title></title>
<script src="~/Scripts/jquery-2.1.1.js"></script>
<script type="text/javascript">
$.ajax({
type: "GET",
url: "http://localhost:9981/API/Application",
processData: true,
data: {},
dataType: "json",
error: function (jqXHR, textStatus, errorThrown) {
// debug here
alert(jqXHR);
},
//error: function(error, data){
// console.log(error)
//},
success: function (data) {
//Clear the div displaying the results
$("productView").empty();
//Create a table and append the table body
var $table = $('<table border="2">');
var $tbody = $table.append('<tbody />').children('tbody');
//data - return value from the web api method
for (var i = 0; i < data.lenght; i++) {
//adda new row to the table
var $trow = $tbody.append('<tr />').children('tr:last');
//add a new column to display name
var $tcol = $trow.append('<td/>').children('td:last').append(data[i].id);
//add a new column to display description
var $tcol = $trow.append('<td/>').children('td:last').append(data[i].description);
}
//display the table in the div
$table.appendTo('#productView');
}
});
</script>
</head>
<body>
<div id="productView"></div>
</body>
</html>
The page loaded but is empty and no error is returned from any section. I run the web page from chrome/FF/IE none of them show error in dev mode and VS shows no errors. I am not sure if i am parsing the data wrong or calling to the wrong part of the json to display the data.
I must be doing something silly at this point but just cant get pass this part.
4 answers
solution1
1 2014-05-16 14:15:02
There is a typo in your success method...
success: function (data) {
//Clear the div displaying the results
$("productView").empty();
//Create a table and append the table body
var $table = $('<table border="2">');
var $tbody = $table.append('tbody /').children('tbody');
//data - return value from the web api method
for (var i = 0; i < data.length; i++){
//adda new row to the table
var $trow=$tbody.append('<tr />').children('tr:last');
//add a new column to display name
var $tcol = $trow.append('<td/>').children('td:last').append(data[i].application_name);
//add a new column to display description
var $tcol = $trow.append('<td/>').children('td:last').append(data[i].description);
//add a new column to display active
var $tcol = $trow.append('<td/>').children('td:last').append(data[i].active);
}
//display the table in the div
$table.appendTo('#productView');
It should be data.length and not data.lenght .
solution2
1 2014-05-17 11:37:30
Success. The issue was with CORS. also with the spelling mistake of data.length The code works fine and the results are what i was wanting to get . Thank you all for your assist.
To fix the issue i had to enable CORS in iis server side to allow cross domain access.
solution3
1 ACCPTED 2014-05-20 09:20:36
您也可以在ajax调用之前在js文件中设置此属性
$.support.cors = true;
solution4
0 2014-05-16 14:10:57
Your code above has a success function, but not an error function.
Try setting an error function, and then see what happens :
data: {},
dataType: "json",
error: function(jqXHR, textStatus, errorThrown ) {
// debug here
alert(jqXHR);
},
success: function() ...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.