Datatable not populating json data

Question

Please I don't know what is wrong with this code, I tried calling my api, in my api the result is successful but the data table am trying to populate is returning error. Here is my code for the population, I don't know if there's something wrong with it

var hrend = '@System.Configuration.ConfigurationManager.AppSettings["SmartHREndPoint"]';
    $.ajax({
        type: 'GET',
        url: hrend + "api/getallappraisal",
        contentType: "application/json"
    })
        .done(function (data, statusText, xhdr) {
            $.each(data, function (key, value) {
                //console.log(value);
                $('#appraisaltable').DataTable().row.add([key + 1, value.AppraisalName, value.IsCurrent, value.CompanyID, new Date(value.DateAdded), value.EmployeeID, new Date(value.AppraisalStart), new Date(value.SubmissionStart), new Date(value.SubmissionEnd), new Date(value.AppraisalEnd), '<a class="btn btn-sm btn-primary" data-toggle="modal" data-target="#createedit" id="editRow"><span class="fa fa-pencil m-r-5"></span> Edit</a>']).draw(false);

            });

        })
        .fail(function (xhdr, statusText, errorText) {
            console.log(xhdr);
        });

and this is the table am trying to populate

<table class="table table-striped custom-table m-b-0 datatable table-hover" id="appraisaltable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Appraisal Name</th>
                            <th>Is Current</th>
                            <th>CompanyID</th>
                            <th>Date Added</th>
                            <th>Employee ID</th>
                            <th>Appraisal Start</th>
                            <th>Submission Start</th>
                            <th>Submission End</th>
                            <th>Appraisal End</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>

These is the error it is returning

DataTables warning: table id=appraisaltable - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

DataTables warning: table id=appraisaltable - Requested unknown parameter '1' for row 1, column 1. For more information about this error, please see http://datatables.net/tn/4

those are the errors its returning, and it will show 2 rows with blank cells in the table and actually in my db there's only 2 rows

Answer 1

I was able to figure out my problem few minutes after I asked this question... instead of deleting the post, I don't know if someone might come accross this problem in the future, here is my mistake

$('#appraisaltable').DataTable().row.add([key + 1, value.AppraisalName, value.IsCurrent, value.CompanyID, new Date(value.DateAdded), value.EmployeeID, new Date(value.AppraisalStart), new Date(value.SubmissionStart), new Date(value.SubmissionEnd), new Date(value.AppraisalEnd), '<a class="btn btn-sm btn-primary" data-toggle="modal" data-target="#createedit" id="editRow"><span class="fa fa-pencil m-r-5"></span> Edit</a>']).draw(false);

instead of

$('#appraisaltable').DataTable().row.add([key + 1, value.appraisalName, value.isCurrent, value.companyID, new Date(value.dateAdded), value.employeeID, new Date(value.appraisalStart), new Date(value.submissionStart), new Date(value.submissionEnd), new Date(value.appraisalEnd), '<a class="btn btn-sm btn-primary" data-toggle="modal" data-target="#createedit" id="editRow"><span class="fa fa-pencil m-r-5"></span> Edit</a>']).draw(false);

if you check my question, I was using eg value.AppraisalName instead. even though the correct spelling how I place it is AppraisalName, you still need to start it with a small letter ie appraisalName not AppraisalName.. don't start with a capital letter