JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

<div></div>

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>';
    console.log(v);
    for(var kk in v.ButtonAttr[0]){
        str += '<li>' + kk + ':' + v.ButtonAttr[0][kk] + '</li>';
    }
    str += '</ul>';
});
str += '</ul>';
console.log(str);
$('div').append(str);