Rest Api: data shows on console but html table shows undefined - html

Question

My post data is being displayed on the console. But the html table shows undefined
The image below shows the problem.
My Jquery Code:
$(document).ready(function(){
//Loading all posts
var loadposts=function(){
$.ajax({
url:"http://localhost:12091/api/post/",
crossdomain: true,
method:"GET",
complete:function(xmlhttp,status){
if(xmlhttp.status==200)
{
var data=xmlhttp.responseJSON;
$("#msg").html(data[0]);
console.log(data[0]);
var str='';
for (var i = 0; i < data.length; i++) {
str += "<tr>";
str += "<td>"+data[i].UserId+"</td>";
str += "<td>"+data[i].PostId+"</td>";
str += "<td>"+data[i].Post1+"</td>";
str += "<td><button class='btn btn-danger' onclick=\"deletepost("+data[i].PostId+")\">Delete</button></td>";
str += "<td><button class='btn btn-info' onclick=\"editpost()\">Edit</button></td>";
str += "</tr>";
}
$("#show__posts tbody").html(str);
}
else
{
$("#msg").html(xmlhttp.status+":"+xmlhttp.statusText);
}
}
});
}
loadposts();
});
The html table:
<div class="container">
<p id="msg"></p>
<table class="table table-striped" border="1" id="show__posts" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>User Id</th>
<th>Post Id</th>
<th>Post</th>
<th>Delete</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
What am I doing wrong?
Probably irrelevant but i'm using asp.net web api in the backend

Answer 1

JavaScript doesn't have a .length property for objects. If you want to work it out, you have to use Object.keys(data).length instead.