I want to add my ajax success response to my data table.

GhaLzai

I want to add my ajax success response to my data table. I have tried multiple things but it didnt worked out. My postman collection is in array of objects structure. below is my collection.

"doc": [
        {
            "billingDate": "2022-04-11T11:54:16.600Z",
            "_id": "6256ce0404de4671d565cca6",
            "serviceProvider": {
                "blocked": false,
                "isLoggedIn": true,
                "createdDate": "2022-04-03T20:04:52.082Z",
                "_id": "624a01981399dc7a14173dda",
                "city": "Karachi",
                "email": "johndoe1@app.com",
                "password": "3460c98eec954a700b17bbac9f14b222",
                "providerName": "Test Service",
                "address": "123 Street",
                "serviceProviderId": "TES321326",
                "__v": 0
            },
            "services": [
                {
                    "_id": "6256ce0404de4671d565cca7",
                    "serviceName": "husnain",
                    "actualCost": 60,
                    "discountedCost": 60
                },
                {
                    "_id": "6256ce0404de4671d565cca8",
                    "serviceName": "husnain",
                    "actualCost": 60,
                    "discountedCost": 70
                },
                {
                    "_id": "6256ce0404de4671d565cca9",
                    "serviceName": "husnain",
                    "actualCost": 60,
                    "discountedCost": 80
                }
            ],
            "total": 210,
            "company": {
                "blocked": false,
                "isLoggedIn": false,
                "createdDate": "2022-04-03T12:14:51.356Z",
                "_id": "62498fc7acd7fb091185b88d",
                "email": "kpetherick3h@live.com",
                "companyName": "Yozio",
                "address": "1 Buhler Road",
                "image": "http://dummyimage.com/327x225.png/dddddd/000000",
                "companyId": "UDB21WROMBA8",
                "password": "3460c98eec954a700b17bbac9f14b222",
                "__v": 0
            },
            "employee": {
                "createdDate": "2022-04-03T17:09:47.994Z",
                "enabled": true,
                "_id": "6249d52bfef2560326a740e7",
                "fName": "James Bartley",
                "age": 30,
                "CNIC": "3974224221510",
                "spouse": "Hilary",
                "fatherName": "James",
                "motherName": "Brunhilde",
                "employeeImage": "http://dummyimage.com/267x237.png/ff4444/ffffff",
                "employeeID": "YO550717",
                "company": "62498fc7acd7fb091185b88d",
                "children": [],
                "__v": 0
            },
            "billId": "YOTE529822",
            "__v": 0
        },]

Adn I am using this ajax code to populated my data but it didnt worked.
kindly anyone help me on this.

$.ajax({

            type: "POST",
            contentType: "application/json",
            url: 'https://2057-185-202-239-227.ngrok.io/serviceprovider/billByServiceProvider',
            data: JSON.stringify({
                     serviceProvider: sessionStorage.getItem("Services_id"),
                   }),
                    DataType: "json",
            success:function(response){

                var dataTable = $("#mydatatable").DataTable();
                dataTable.clear().draw();

                $.each(response, function(index, value) {
                     console.log(value);

    ~~~~~~~~
    DataTable.row.Add([value.doc.billingDate]).draw();

              });
            }
        });

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

rf1234

DataTable.row.Add([value.doc.billingDate]).draw();

This has a typo; it's row.add();
https://datatables.net/reference/api/row.add()

GhaLzai

@rf1234 I dont understand whats the issue

kthorngren

Javascript is case sensitive. Change row.Add() to row.add(). Looks like you are adding one row value.doc.billingDate at a time in the $.each() loop. row.add() does not expect the row data to be within an array so you can remove the []. To increase performane, f adding multiple rows, remove the .draw() from row.add() and call it once after the loop completes, something like this:

 
            $.each(response, function(index, value) {
                 console.log(value);
 
~~~~~~~~
DataTable.row.add( value.doc.billingDate );
 
          });
     DataTable.draw();

Kevin

GhaLzai

@kevin. I pasted your code, I am getting response in my consolelog but not getting any data into my table.

allan

We are happy to take a look at a page showing the issue.

Allan