How load json data to html table from ajax request

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>

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

Its not working. Something wrong in data. Map.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

Can you explain what you are expecting to happen that is not happening with your existing code you posted above? You only posted some JSON and some code, but explain how you want to display it in a table.

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

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!

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