JSON parser

HTML

<ul id="categories"></ul>
<select id="items"></select>

JavaScript

var jsonCats = [
    {"id": "category1", "items": [{"iid":"item1"}, {"iid":"item2"}, {"iid":"item3"}]},
    {"id": "category2", "items": [{"iid":"item4"}, {"iid":"item5"}, {"iid":"item6"}]},
    {"id": "category3", "items": [{"iid":"item7"}, {"iid":"item8"}, {"iid":"item9"}]},
    {"id": "category4", "items": [{"iid":"item0"}]}
];

$.each(jsonCats, function(key, value) {
    var category = $("<li>" + this.id + "</li>");
    var items = this.items;
    
    $("#categories").append(category);
    
    category.click(function() {
        $("#items").empty();
        for (var j in items) {
            var item = $("<option>" + items[j].iid + "</option>");
            
            $("#items").append(item);
        }
    });
});

/*
for (var i in jsonCats) {
    var category = $("<li>" + jsonCats[i].id + "</li>");
    var items = jsonCats[i].items;
    
    $("#categories").append(category);
    
    category.click(function() {
        $("#items").empty();
        for (var j in items) {
            var item = $("<option>" + items[j].iid + "</option>");
            
            $("#items").append(item);
        }
    });
}
*/