How load json data to html table from ajax request

JavaScript
1

my json data

{
  "data": {
    "ResponseMessage": [
      {
        "ReturnMessage": "Request Completed!",
        "ReturnID": "0",
        "ReturnStatus": "Y"
      }
    ],
    "Table": [
      {
        "ParentCategoryId": 1,
        "ParentCategoryName": "Electronics",
        "IsActive": true
      },
      {
        "ParentCategoryId": 2,
        "ParentCategoryName": "Electronics",
        "IsActive": true
      },
      {
        "ParentCategoryId": 3,
        "ParentCategoryName": "Sports",
        "IsActive": true
      },
      {
        "ParentCategoryId": 43,
        "ParentCategoryName": "Clothing",
        "IsActive": true
      },
      {
        "ParentCategoryId": 44,
        "ParentCategoryName": "Clothing",
        "IsActive": true
      },
      {
        "ParentCategoryId": 45,
        "ParentCategoryName": null,
        "IsActive": true
      },
      {
        "ParentCategoryId": 46,
        "ParentCategoryName": "Textiles",
        "IsActive": true
      },
      {
        "ParentCategoryId": 47,
        "ParentCategoryName": "Textiles",
        "IsActive": true
      },
      {
        "ParentCategoryId": 48,
        "ParentCategoryName": "Textiles",
        "IsActive": true
      },
      {
        "ParentCategoryId": 49,
        "ParentCategoryName": "Textiles",
        "IsActive": true
      },
      {
        "ParentCategoryId": 50,
        "ParentCategoryName": "Textiles",
        "IsActive": true
      },
      {
        "ParentCategoryId": 51,
        "ParentCategoryName": "",
        "IsActive": true
      },
      {
        "ParentCategoryId": 52,
        "ParentCategoryName": "xzxzx",
        "IsActive": true
      },
      {
        "ParentCategoryId": 53,
        "ParentCategoryName": "yyyyyyyy",
        "IsActive": true
      },
      {
        "ParentCategoryId": 54,
        "ParentCategoryName": null,
        "IsActive": true
      },
      {
        "ParentCategoryId": 55,
        "ParentCategoryName": null,
        "IsActive": true
      },
      {
        "ParentCategoryId": 56,
        "ParentCategoryName": "q",
        "IsActive": true
      },
      {
        "ParentCategoryId": 57,
        "ParentCategoryName": null,
        "IsActive": true
      },
      {
        "ParentCategoryId": 58,
        "ParentCategoryName": "errrrrrrrrrrrrrrrrrrrrrrrrrrrrrr",
        "IsActive": true
      },
      {
        "ParentCategoryId": 59,
        "ParentCategoryName": "qrs",
        "IsActive": true
      },
      {
        "ParentCategoryId": 60,
        "ParentCategoryName": "Textiles",
        "IsActive": true
      },
      {
        "ParentCategoryId": 61,
        "ParentCategoryName": "aaaaaa",
        "IsActive": true
      },
      {
        "ParentCategoryId": 62,
        "ParentCategoryName": "bbbbbb",
        "IsActive": true
      },
      {
        "ParentCategoryId": 63,
        "ParentCategoryName": "wewewew",
        "IsActive": true
      },
      {
        "ParentCategoryId": 64,
        "ParentCategoryName": "sdsd",
        "IsActive": true
      },
      {
        "ParentCategoryId": 65,
        "ParentCategoryName": "sdsd",
        "IsActive": true
      },
      {
        "ParentCategoryId": 66,
        "ParentCategoryName": "wewewew",
        "IsActive": true
      },
      {
        "ParentCategoryId": 67,
        "ParentCategoryName": "xcxcx",
        "IsActive": true
      },
      {
        "ParentCategoryId": 68,
        "ParentCategoryName": "",
        "IsActive": true
      },
      {
        "ParentCategoryId": 69,
        "ParentCategoryName": "hxsj",
        "IsActive": true
      },
      {
        "ParentCategoryId": 70,
        "ParentCategoryName": "shytd",
        "IsActive": true
      },
      {
        "ParentCategoryId": 71,
        "ParentCategoryName": "wewewew",
        "IsActive": true
      },
      {
        "ParentCategoryId": 72,
        "ParentCategoryName": "t",
        "IsActive": true
      },
      {
        "ParentCategoryId": 73,
        "ParentCategoryName": "t",
        "IsActive": true
      },
      {
        "ParentCategoryId": 74,
        "ParentCategoryName": null,
        "IsActive": true
      },
      {
        "ParentCategoryId": 75,
        "ParentCategoryName": "t",
        "IsActive": true
      },
      {
        "ParentCategoryId": 76,
        "ParentCategoryName": "shytdeee",
        "IsActive": true
      },
      {
        "ParentCategoryId": 77,
        "ParentCategoryName": "t",
        "IsActive": true
      },
      {
        "ParentCategoryId": 78,
        "ParentCategoryName": "shytdeee",
        "IsActive": true
      },
      {
        "ParentCategoryId": 79,
        "ParentCategoryName": "",
        "IsActive": true
      },
      {
        "ParentCategoryId": 80,
        "ParentCategoryName": "",
        "IsActive": true
      },
      {
        "ParentCategoryId": 81,
        "ParentCategoryName": "",
        "IsActive": true
      },
      {
        "ParentCategoryId": 82,
        "ParentCategoryName": "",
        "IsActive": true
      },
      {
        "ParentCategoryId": 83,
        "ParentCategoryName": "",
        "IsActive": true
      },
      {
        "ParentCategoryId": 84,
        "ParentCategoryName": "shytd",
        "IsActive": true
      },
      {
        "ParentCategoryId": 85,
        "ParentCategoryName": "",
        "IsActive": true
      },
      {
        "ParentCategoryId": 86,
        "ParentCategoryName": "erere",
        "IsActive": true
      },
      {
        "ParentCategoryId": 87,
        "ParentCategoryName": null,
        "IsActive": true
      },
      {
        "ParentCategoryId": 88,
        "ParentCategoryName": "ererrererer",
        "IsActive": true
      },
      {
        "ParentCategoryId": 89,
        "ParentCategoryName": null,
        "IsActive": true
      },
      {
        "ParentCategoryId": 90,
        "ParentCategoryName": null,
        "IsActive": true
      },
      {
        "ParentCategoryId": 91,
        "ParentCategoryName": "shytd",
        "IsActive": true
      },
      {
        "ParentCategoryId": 92,
        "ParentCategoryName": "shytd",
        "IsActive": true
      },
      {
        "ParentCategoryId": 93,
        "ParentCategoryName": "oooo",
        "IsActive": true
      },
      {
        "ParentCategoryId": 94,
        "ParentCategoryName": "eeeeeeeeee",
        "IsActive": true
      },
      {
        "ParentCategoryId": 95,
        "ParentCategoryName": "shytd",
        "IsActive": true
      },
      {
        "ParentCategoryId": 96,
        "ParentCategoryName": "ertertet",
        "IsActive": true
      },
      {
        "ParentCategoryId": 97,
        "ParentCategoryName": null,
        "IsActive": true
      },
      {
        "ParentCategoryId": 98,
        "ParentCategoryName": "Textiles",
        "IsActive": true
      },
      {
        "ParentCategoryId": 99,
        "ParentCategoryName": "Textiles",
        "IsActive": true
      },
      {
        "ParentCategoryId": 100,
        "ParentCategoryName": "Textiles",
        "IsActive": true
      },
      {
        "ParentCategoryId": 101,
        "ParentCategoryName": "Textiles",
        "IsActive": true
      },
      {
        "ParentCategoryId": 102,
        "ParentCategoryName": "Textiles",
        "IsActive": true
      },
      {
        "ParentCategoryId": 103,
        "ParentCategoryName": "Textiles",
        "IsActive": true
      },
      {
        "ParentCategoryId": 104,
        "ParentCategoryName": "oooo",
        "IsActive": true
      },
      {
        "ParentCategoryId": 105,
        "ParentCategoryName": "eeeeeeeeee",
        "IsActive": true
      },
      {
        "ParentCategoryId": 106,
        "ParentCategoryName": "cars",
        "IsActive": true
      },
      {
        "ParentCategoryId": 107,
        "ParentCategoryName": "fshdgj",
        "IsActive": true
      },
      {
        "ParentCategoryId": 108,
        "ParentCategoryName": "etrey",
        "IsActive": true
      },
      {
        "ParentCategoryId": 109,
        "ParentCategoryName": "shytj",
        "IsActive": true
      }
    ]
  }
}

javascript below

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var res = [];
        $.ajax({
            type: "GET",
            datatype:"jsonp",
            contentType: "application/json;charset=utf-8",
            processData: true,
            url: "http://209.126.78.88:89/get_ParentCategory",
            success: function (data) {
                res.push(data);
                array(res);
            }
        });
        function array(arr) {
            console.log(arr);
        }
    });
</script>
2

Hey Preemy,
Try this below code, I don’t know what is your HTML structure, but you can modify accordingly.

In html you should have like this:

<table id="dataTable">
  <tbody>
    
  </tbody>
</table>

And use this code for retrieving data & populating rows and columns:

let xhr = new XMLHttpRequest;
xhr.open('GET', 'your-url', true);
xhr.onload = function() 
{
  if (this.status === 200) 
  {
  	let data = JSON.parse(this.responseText).Table,
    		tbodyHtml = '';
    
    data.map(function(d) {
    	tbodyHtml =+ `
      	<tr>
        	<td>${d.ParentCategoryId}</td>
        	<td>${d.ParentCategoryName}</td>
        	<td>${d.IsActive}</td>
        </tr>
      `;
    });
    
    document.querySelector('#dataTable tbody').innerHTML = tbodyHtml;
  }
}
xhr.send();

Ask here if you face any issue.

Happy coding!!

1 Like
3

Its not working. Something wrong in data. Map.

5

I want to display the above json data in html table.
my html template is given below:

                        <th class="column-title no-link last" style="display: table-cell;">
                            <span class="nobr">Action</span>
                        </th>
                        <th class="bulk-actions" colspan="7" style="display: none;">
                            <a class="antoo" style="color:#fff; font-weight:500;">Bulk Actions ( <span class="action-cnt">1 Records Selected</span> ) <i class="fa fa-chevron-down"></i></a>
                        </th>
                    </tr>
                </thead>

                <tbody>

                    <tr class="even pointer">
                        <td class="a-center ">
                            <div class="icheckbox_flat-green" style="position: relative;"><input type="checkbox" class="flat" name="table_records" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                        </td>
                        <td class="" id="ParentName"></td>
                        <td class=""id="Active"></td>

                        <td class=" last">
                            <button type="button" class="btn btn-info btn-sm" onclick="location.href='@Url.Action("Product","Home")'"> <i class="fa fa-edit"></i></button>
                        </td>
                    </tr>
                </tbody>

            </table>
 Parent Category Active
6

Hi Preemy, since you data structure is { data: {} }, your (data) parameter is not what data attribute in the object given.

Please compare to this change below

function (data) {
                res.push(data.data);
                array(res);
}

Hopefully it will help!

7

How can i add new row to table for the above code.@vicky