Question 69610 in Ajax Question posted in
You can find the official documentation here.

I am trying to show the data from my ajax response to my jquery data table – Jquery ajax

What I am trying to do it that I am trying to show my ajax response to my jquery data table
my table looks like this

<div style="margin: 20px;">

                                            <table id="example" class="display" style="width:100%">
                                                <thead>
                                                    <tr>
                                                        <th>Spouse</th>
                                                        <th>CNIC</th>
                                                        <th>Father</th>
                                                        <th>Mother.</th>
                                                        <th>Employee ID</th>
                                                        <th>Children</th>
                                                        <th>Age</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                                </div>

and below is my ajax response which I am trying to show in my table but its not showing any data yet I am getting data from this link in my postman.
my ajax call is written below

    <script type="text/javascript">
                
    $(document).ready(function(){

    var table = $('#example').DataTable( {
      ajax: {
        url : "https://2057-185-202-239-227.ngrok.io/employee/employeesByCompany/"+sessionStorage.getItem('Companies_id'),
        dataSrc: "doc",
      },
      columns: [
        { data: 'spouse' },
        { data: 'CNIC' },
        { data: 'fatherName' },
        { data: 'motherName' },
        { data: 'employeeID' },
        { data: 'age' },
        { data: 'children[]' }
      ],
    });
  });

    </script>

here is my Json Response which I am getting and I want to add pagination on

{
"message": "Success",
"doc": [
    {
        "createdDate": "2022-04-03T17:19:02.666Z",
        "enabled": true,
        "_id": "6249d7156a4ef003db97e4bd",
        "fName": "James Bartley",
        "age": 30,
        "CNIC": "3974224221510",
        "spouse": "Hilary",
        "fatherName": "James",
        "motherName": "Brunhilde",
        "employeeImage": "http://dummyimage.com/267x237.png/ff4444/ffffff",
        "employeeID": "IN319122",
        "company": "62498fc7acd7fb091185bb0e",
        "children": [],
        "__v": 0
    },
    {
        "createdDate": "2022-04-03T17:19:02.666Z",
        "enabled": true,
        "_id": "6249d7156a4ef003db97e4c2",
        "fName": "Clerc Billings",
        "age": 52,
        "CNIC": "4618981270977",
        "spouse": "Debra",
        "fatherName": "Clerc",
        "motherName": "Gwendolyn",
        "employeeImage": "http://dummyimage.com/258x287.png/cc0000/ffffff",
        "employeeID": "IN313190",
        "company": "62498fc7acd7fb091185bb0e",
        "children": [],
        "__v": 0
    },

enter image description here

Tags:

2

Answers


  1. 0

    If you mean this:

    doc.map(function(item, id) {
  return(
    <tr key={id}>
      <td>{item.fatherName}</td>
      <td>{item.motherName}</td>
      <td>{item.spouse}</td>
    </tr>
  )
}.bind(this))
    Login or Signup to reply.
  2. 0

    Here is an approach which uses your JSON.

    The table:

    <div style="margin: 20px;">

    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Spouse</th>
                <th>CNIC</th>
                <th>Father</th>
                <th>Mother.</th>
                <th>Employee ID</th>
                <th>Age</th>
            </tr>
        </thead>
    </table>

</div>

    The JavaScript:

      $(document).ready(function(){

    var table = $('#example').DataTable( {
      ajax: {
        url : "http://localhost:7001/docdata",
        dataSrc: "doc"
      },
      columns: [
        { data: "spouse" },
        { data: "CNIC" },
        { data: "fatherName" },
        { data: "motherName" },
        { data: "employeeID" },
        { data: "age" }            
      ]
    } );
  });

    My URL returns your JSON. Because your JSON’s data array is called doc, you need to use that name in the dataSrc option:

    dataSrc: "doc"

    There is no need to manipulate any HTML strings.

    You should be able to take this and add in the extra pieces you may need – such as your URL, your use of session storage, and so on.

    My example generates the following:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search