json data in table display as undefined in asp.net core

Question

what i want to do is to display json data to table in view i get the json data from postman as shown in the picture

but in the view when i want to display them in the table it shows undefined

here is my view data


<table class="table table-bordered table-condensed table-hover table-striped" id="myTable">
    <thead>
        <tr>
            <th>ServiceOrderNumber</th>
            <th>UserName</th>
            <th>RepairStartDate</th>
            <th>Model</th>
            <th>DefectPart</th>
            <th>Remark</th>
            <th>PendingReason</th>
            <th>DateDiff</th>

        </tr>
    </thead>
    <tbody></tbody>
</table>

<script>
    $.ajax({
        type: "POST",
        url: "/Reports/Pendings/",
        contentType: "application/json; charset=utf-8",
        cache: false,
        traditional: true,
        dataType: "json",
        processData: true,

        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                var row = $('<tr><td>' + data[i].ServiceOrderNumber + '</td><td>' + data[i].UserName + '</td><td>' + data[i].RepairStartDate + '</td><td>' + data[i].Model + '</td><td>' + data[i].DefectPart + '</td><td>' + data[i].Remark + '</td><td>' + data[i].PendingReason + '</td><td>' + data[i].DateDiff + '</td></tr>');

                $('#myTable').append(row);
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('Error: ' + textStatus + ' - ' + errorThrown);
        }
    });

</script>

the data in the table display as below image:

MaartenDev · Accepted Answer · 2021-04-19 11:40:50Z

The API returns the records as arrays instead of Objects. To access the values you will have to use indexes. Checkout the example below:

<script>
    $.ajax({
        type: "POST",
        url: "/Reports/Pendings/",
        contentType: "application/json; charset=utf-8",
        cache: false,
        traditional: true,
        dataType: "json",
        processData: true,

        success: function (data) {
            for (var i = 1; i < data.length; i++) {
                // Replaced key based access(.Key) by index access([1])
                var row = $('<tr><td>' + data[i][0] + '</td><td>' + data[i][1]+ '</td><td>' + data[i][2]+ '</td><td>' + data[i][3]+ '</td><td>' + data[i][4]+ '</td><td>' + data[i][5]+ '</td><td>' + data[i][5]+ '</td><td>' + data[i][6]+ '</td></tr>');

                $('#myTable').append(row);
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('Error: ' + textStatus + ' - ' + errorThrown);
        }
    });

</script>

Another option would be to change the API to return the results as Objects instead of arrays. The structure could look something like the following:

[
  {
    "ServiceOrderNumber": 25599,
    "UserName": "User.Name",
    "RepairStartDate": "2021-04-17",
    "Model": "ModelName1",
    "DefectPart": "LCD",
    "Remark": {},
    "PendingReason": "Parts not available",
    "DateDiff": 12
  },
  {
    "ServiceOrderNumber": 255600,
    "UserName": "TestUser.Name",
    "RepairStartDate": "2020-04-17",
    "Model": "ModelName2",
    "DefectPart": "LCD",
    "Remark": {},
    "PendingReason": "Parts not available",
    "DateDiff": 12
  }
]

This would allow you to use your original javascript code.

Collectives™ on Stack Overflow

json data in table display as undefined in asp.net core

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related