# How load json data to html table from ajax request

**URL:** <https://forum.freecodecamp.org/t/how-load-json-data-to-html-table-from-ajax-request/264627>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [March 13, 2019, 10:08am UTC](https://forum.freecodecamp.org/t/how-load-json-data-to-html-table-from-ajax-request/264627 "2019-03-13T10:08:25Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Preemy](https://avatars.discourse-cdn.com/v4/letter/p/6bbea6/32.png) [@Preemy](https://forum.freecodecamp.org/u/Preemy)\
**Post date:** [March 13, 2019, 10:08am UTC](https://forum.freecodecamp.org/t/how-load-json-data-to-html-table-from-ajax-request/264627/1 "2019-03-13T10:08:25Z")

</div>

my json data

```auto
{
  "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

```html
<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>

```

---

<div class="post-metadata">

**Author:** ![viecky](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/viecky/32/110994_2.png) [@viecky](https://forum.freecodecamp.org/u/viecky)\
**Post date:** [March 13, 2019, 10:45am UTC](https://forum.freecodecamp.org/t/how-load-json-data-to-html-table-from-ajax-request/264627/2 "2019-03-13T10:45:35Z")

</div>

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:

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

```

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

```auto
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!!

---

<div class="post-metadata">

**Author:** ![Preemy](https://avatars.discourse-cdn.com/v4/letter/p/6bbea6/32.png) [@Preemy](https://forum.freecodecamp.org/u/Preemy)\
**Post date:** [March 13, 2019, 4:39pm UTC](https://forum.freecodecamp.org/t/how-load-json-data-to-html-table-from-ajax-request/264627/3 "2019-03-13T16:39:03Z")

</div>

Its not working. Something wrong in data. Map.

---

<div class="post-metadata">

**Author:** ![Preemy](https://avatars.discourse-cdn.com/v4/letter/p/6bbea6/32.png) [@Preemy](https://forum.freecodecamp.org/u/Preemy)\
**Post date:** [March 14, 2019, 1:01am UTC](https://forum.freecodecamp.org/t/how-load-json-data-to-html-table-from-ajax-request/264627/5 "2019-03-14T01:01:08Z")

</div>

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 |
| --- | --- | --- |

---

<div class="post-metadata">

**Author:** ![itchakhun](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/itchakhun/32/112148_2.png) [@itchakhun](https://forum.freecodecamp.org/u/itchakhun)\
**Post date:** [March 14, 2019, 9:32am UTC](https://forum.freecodecamp.org/t/how-load-json-data-to-html-table-from-ajax-request/264627/6 "2019-03-14T09:32:01Z")

</div>

> [@Preemy](#):
>
> function (data) { res.push(data); array(res); }

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

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

```

Hopefully it will help!

---

<div class="post-metadata">

**Author:** ![Preemy](https://avatars.discourse-cdn.com/v4/letter/p/6bbea6/32.png) [@Preemy](https://forum.freecodecamp.org/u/Preemy)\
**Post date:** [March 15, 2019, 6:36am UTC](https://forum.freecodecamp.org/t/how-load-json-data-to-html-table-from-ajax-request/264627/7 "2019-03-15T06:36:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 2, 2021, 11:12am UTC](https://forum.freecodecamp.org/t/how-load-json-data-to-html-table-from-ajax-request/264627/8 "2021-02-02T11:12:45Z")

</div>