I'm trying to get the json data by ajax and show them in the view. The data is correct in action method but when I want to show the data in table all the s are showed as undefined and so many rows that I know I don't have this much rows .maybe it is because of for loop and each loop but I really don't know how to fix it. This is the json data:
{
"$id": "1",
"$values": [
{
"$id": "2",
"TicketId": 32,
"Author": "5aff2283-5e71-4b10-a809-7c0235ccc18d",
"To": "f956d006-72b7-4a4c-b5cf-9354d6e6f193",
"Status": 1,
"priority": 2,
"TrackingCode": "1bbdd10553634f2fbab1769cbf0b1b44",
"CreateDate": "2021-04-04T10:10:35.5043873",
"IsPrivate": true,
"IsDeleted": false,
"User": null,
"ApplicationRole": {
"$id": "3",
"Title": "\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06CC\u0633",
"Description": null,
"IsDelete": false,
"CreateDate": "2021-03-17T12:20:46.6002855",
"EditDate": null,
"ParentId": null,
"Roles": null,
"Id": "f956d006-72b7-4a4c-b5cf-9354d6e6f193",
"Name": "programmer",
"NormalizedName": "PROGRAMMER",
"ConcurrencyStamp": "a76600ef-8e82-4479-915d-41ad750cad5d"
},
"Answer": null
},
{
"$id": "4",
"TicketId": 33,
"Author": "5aff2283-5e71-4b10-a809-7c0235ccc18d",
"To": "f956d006-72b7-4a4c-b5cf-9354d6e6f193",
"Status": 2,
"priority": 0,
"TrackingCode": "f316a0d4bf9c4014a8acce1c152a56de",
"CreateDate": "2021-04-04T10:15:09.7256989",
"IsPrivate": false,
"IsDeleted": false,
"User": null,
"ApplicationRole": {
"$ref": "3"
},
"Answer": {
"$id": "5",
"AnswerId": 6,
"TicketId": 33,
"UserId": "5aff2283-5e71-4b10-a809-7c0235ccc18d",
"AnswerText": "\u003Cp\u003Ebbbbbb\u003C/p\u003E\r\n",
"File": null,
"DateTime": "2021-04-05T11:03:24.6079034",
"IsDeleted": false,
"Ticket": {
"$ref": "4"
},
"User": null
}
}
]
}
This is the Ajax:
<script type="text/javascript">
$(document).ready(function () {
loadData();
});
function loadData() {
$.ajax({
url: "/Ticket/GetMyTickets",
type: "Get",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (ListData) {
var str = "";
for (var i = 0; i < ListData.length; i++) {
$.each(ListData[i], function (index, items) {
str += "<tr>";
str += "<td>" + ListData[i].Status + "</td>";
str += "<td>" + ListData[i].priority + "</td>";
str += "<td>" + ListData[i].TrackingCode + "</td>";
str += "<td>" + ListData[i].CreateDate + "</td>";
str += "<td>" + ListData[i].IsPrivate + "</td>";
str += "<td>" + ListData[i].To + "</td>";
str += "<td><a onclick=Edit(this) data-toggle='modal' data-
target='#myModal'>نمایش پاسخ ها</a></td>";
str += "</tr>";
},
BodyData.innerHTML = str);
$(".TblData tr").fadeIn(1000);
};
}
});
}
I searched a lot but I didn't find any solution for the problem.
UPDATE This is the output of console.log(ListData):
{
"$id": "1",
"$values": [
{
"$id": "2",
"TicketId": 33,
"Author": "5aff2283-5e71-4b10-a809-7c0235ccc18d",
"To": "f956d006-72b7-4a4c-b5cf-9354d6e6f193",
"Status": 2,
"priority": 0,
"TrackingCode": "f316a0d4bf9c4014a8acce1c152a56de",
"CreateDate": "2021-04-04T10:15:09.7256989",
"IsPrivate": false,
"IsDeleted": false,
"User": {
"$id": "3",
"FullName": "\u0645\u062F\u06CC\u0631 \u0633\u0627\u06CC\u062A",
"Avatar": "DefualtAvatar.jpg",
"IsDelete": false,
"CreateDate": "2021-03-16T13:05:20.6549686",
"EditDate": null,
"Id": "5aff2283-5e71-4b10-a809-7c0235ccc18d",
"UserName": "09876543210",
"NormalizedUserName": "09876543210",
"Email": "nikitmb2@gmail.com",
"NormalizedEmail": null,
"EmailConfirmed": false,
"PasswordHash":
"AQAAAAEAACcQAAAAEFbvXk/J1tXDz/
gAkIwWVjGWwSCeVhRgpPM0PVaRt1NJ1xlNr8HhxtMNWgd2u40BQw==",
"SecurityStamp": "IELKDSXBF5RE3MFHN7CNVOIGWWMK4QAV",
"ConcurrencyStamp": "517cf6f0-2f41-44a6-9a99-9512e0ffc471",
"PhoneNumber": "09876543210",
"PhoneNumberConfirmed": false,
"TwoFactorEnabled": false,
"LockoutEnd": null,
"LockoutEnabled": true,
"AccessFailedCount": 0
},
"ApplicationRole": {
"$id": "4",
"Title": "\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06CC\u0633",
"Description": null,
"IsDelete": false,
"CreateDate": "2021-03-17T12:20:46.6002855",
"EditDate": null,
"ParentId": null,
"Roles": null,
"Id": "f956d006-72b7-4a4c-b5cf-9354d6e6f193",
"Name": "programmer",
"NormalizedName": "PROGRAMMER",
"ConcurrencyStamp": "a76600ef-8e82-4479-915d-41ad750cad5d"
},
"Answer": {
"$id": "5",
"AnswerId": 6,
"TicketId": 33,
"UserId": "5aff2283-5e71-4b10-a809-7c0235ccc18d",
"AnswerText": "\u003Cp\u003Ebbbbbb\u003C/p\u003E\r\n",
"File": null,
"DateTime": "2021-04-05T11:03:24.6079034",
"IsDeleted": false,
"Ticket": {
"$ref": "2"
},
"User": {
"$ref": "3"
}
}
}
]
}
According to your json structure you only need one loop to iterate through your json array . So, simply use ListData["$values"] inside $.each and then get respective value using keyname.
Demo Code :
//just for demo
var ListData = {
"$id": "1",
"$values": [{
"$id": "2",
"TicketId": 32,
"Author": "5aff2283-5e71-4b10-a809-7c0235ccc18d",
"To": "f956d006-72b7-4a4c-b5cf-9354d6e6f193",
"Status": 1,
"priority": 2,
"TrackingCode": "1bbdd10553634f2fbab1769cbf0b1b44",
"CreateDate": "2021-04-04T10:10:35.5043873",
"IsPrivate": true,
"IsDeleted": false,
"User": null,
"ApplicationRole": {
"$id": "3",
"Title": "\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06CC\u0633",
"Description": null,
"IsDelete": false,
"CreateDate": "2021-03-17T12:20:46.6002855",
"EditDate": null,
"ParentId": null,
"Roles": null,
"Id": "f956d006-72b7-4a4c-b5cf-9354d6e6f193",
"Name": "programmer",
"NormalizedName": "PROGRAMMER",
"ConcurrencyStamp": "a76600ef-8e82-4479-915d-41ad750cad5d"
},
"Answer": null
},
{
"$id": "4",
"TicketId": 33,
"Author": "5aff2283-5e71-4b10-a809-7c0235ccc18d",
"To": "f956d006-72b7-4a4c-b5cf-9354d6e6f193",
"Status": 2,
"priority": 0,
"TrackingCode": "f316a0d4bf9c4014a8acce1c152a56de",
"CreateDate": "2021-04-04T10:15:09.7256989",
"IsPrivate": false,
"IsDeleted": false,
"User": null,
"ApplicationRole": {
"$ref": "3"
},
"Answer": {
"$id": "5",
"AnswerId": 6,
"TicketId": 33,
"UserId": "5aff2283-5e71-4b10-a809-7c0235ccc18d",
"AnswerText": "\u003Cp\u003Ebbbbbb\u003C/p\u003E\r\n",
"File": null,
"DateTime": "2021-04-05T11:03:24.6079034",
"IsDeleted": false,
"Ticket": {
"$ref": "4"
},
"User": null
}
}
]
}
$(document).ready(function() {
loadData();
});
function loadData() {
/* $.ajax({
url: "/Ticket/GetMyTickets",
type: "Get",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(ListData) {*/
var str = "";
//get values array
$.each(ListData["$values"], function(index, items) {
//use items.nameofkey
str += "<tr>";
str += "<td>" + items.Status + "</td>";
str += "<td>" + items.priority + "</td>";
str += "<td>" + items.TrackingCode + "</td>";
str += "<td>" + items.CreateDate + "</td>";
str += "<td>" + items.IsPrivate + "</td>";
str += "<td>" + items.To + "</td>";
str += "<td><a href='#' onclick='Edit(this)' data-toggle='modal' data-target='#myModal'> نمایش پاسخ ها </a></td> ";
str += "</tr>";
});
$(".TblData").html(str)
$(".TblData").fadeIn(1000);
/* };
}
});*/
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tbody class="TblData"></tbody>
</table>