JSFiddle - React, Tailwind, and code Playground

HTML

<table class="api_fail">
						<tr>
							<th scope="col">Nickname</th>
							<th scope="col">Time</th>
						</tr>
						<tbody id="track_a">

						</tbody>
					</table>

JavaScript

var data = {
    "Controls": [
        {
        "Object": "Button",
        "ButtonAttr": [{
            "x": "1",
            "y": "2",
            "width": "3",
            "height": "4"}]},
    {
        "Object": "Image",
        "ButtonAttr": [{
            "x": "5",
            "y": "6",
            "width": "7",
            "height": "8"}]},
    {
        "Object": "TextField",
        "ButtonAttr": [{
            "x": "9",
            "y": "10",
            "width": "11",
            "height": "12"}]}
            ]
};

var str = '<ul>';
$.each(data.Controls, function(k, v) {
    str += '<li>' + v.Object + '</li><ul>';
    $.each(v.ButtonAttr[0],function(kk,vv){
      str += '<li>' + kk + ':' + vv + '</li>';
    });    
    str += '</ul>';
});
str += '</ul>';
$('#track_a').append(str);