Question

I cant seem to get this to work. Im trying to do two things

A). Get the following code to show up correctly. The first element is show ‘undefined

<ul>
<li>Button
<ul>
 <li>x:1</li>
 <li>y:2</li>
 <li>width:3</li>
 <li>height:4</li>
</ul>
</ul>

Here is my code:

$(document).ready(function() {
var data = {
    "Controls": [{
            "Button":[{ "x": "1","y": "2","width": "3","height": "4" }],

            "Image":[{"x": "5","y": "6","width": "7","height": "8"}],

            "TextField":[{"x": "9","y": "10","width": "11","height": "12"}]
        }]
}

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

And

B). trying to display a list(separate list from above) of just the fields. like this:

<li>Button</li>
<li>Image</li>
<li>TextField</li>

I think that the answer to the second lies in the first, but I cannot seem to get the targeting right.

Any help is appreciated

Answer 1

Demo

To get the first list:

var str = '<ul>';
var target = "Button";

str += '<li>' + target + '<ul>';
$.each(data.Controls[0][target][0], function(kk, vv){
    str += '<li>' + kk + ':' + vv + '</li>';
});
str += '</ul></li>';

str += '</ul>';

To get the second list:

var str = '<ul>';
$.each(data.Controls[0], function(k,v) {
    str += '<li>' + k + '</li>';
});
str += '</ul>';

To target them by index, so Button is 0:

var str = '<ul>';
var target = 0;
var count = 0;

$.each(data.Controls[0], function(k,v) {
    if(count == target)
    {
        str += '<li>' + k + '<ul>';

        $.each(v[0], function(kk, vv){
            str += '<li>' + kk + ':' + vv + '</li>';
        });
        str += '</ul></li>';
        return false; // <-- break because we got what we wanted
    }
    count++;
});

str += '</ul>';