JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

JavaScript

var data = {"batchcomplete":"","query":
{
    "Controls": 
        {
        "Object": "Button",
        "ButtonAttr": {
            "x": "1",
            "y": "2",
            "width": "3",
            "height": "4"}},
            
}
};

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