I'm really excited to hear about the skin combination viewer! I've heard whispers of such a thing for a while and I've been looking forward to it!

edit: To followup about skin.attachments[slotIndex], I was a little tired when I asked, so what I was wanting was to traverse basic json, I guess. x'D What I ended up with is this:

var slots = skeletons[activeSkeleton].skeleton.skin.attachments;
for (var i = 0; i < slots.length; i++) {
   var slot = slots[i];
      for (var attachment in slot) {
      console.log(attachment);
      }
}

This gets me all the names of all the attachments in all the slots.

I'd like to get the name of the slot in there some way, too? So...

console.log(attachment+" belongs on "+slotName); // example output: "white_shoe belongs on foot"

I know this is off in the land of basic json traversal now, but... help? D; Is this even possible? I know I can do this:

console.log(attachment+" belongs on slot["+i+"]"); // example output: "white_shoe belongs on slot[10]"

And from there I could go "well, if i equals 10, then output the word foot"

but is this data really not stored in the tree?

Again, the end result of all this is to be able to dynamically generate a form so I can call the function skeleton.setAttachment(slot, attachment) with this information. I'm so close!

Unfortunately, I get an error of "Cannot read property 'name' of undefined" with slot.data.name:

var slots = skeletons[activeSkeleton].skeleton.skin.attachments;
for (var i = 0; i < slots.length; i++) {
   var slot = slots[i];
   for (var attachment in slot) {
      console.log(attachment+" belongs on slot["+i+"]: "+slot.data.name);
   }
}

Or, to be more specific:

console.log(attachment+" belongs on slot["+i+"]"); // white_shoe belongs on slot[10]
console.log(attachment+" belongs on slot["+i+"]: "+slot.data.name); // "Cannot read property 'name' of undefined"
console.log(attachment+" belongs on slot["+i+"]: "+slot.data); // white_shoe belongs on slot[10]: undefined
console.log(attachment+" belongs on slot["+i+"]: "+slot.name); // white_shoe belongs on slot[10]: undefined
console.log(attachment+" belongs on slot["+i+"]: "+slot); // white_shoe belongs on slot[10]: [object Object]

And this is probably just due to me looping over this as array counting how many objects are inside. (Working with json is tough when I'm tired.)

Thank you so much! My final result is this:

var setup_slotListUI = function() {
   var skeleton = skeletons[activeSkeleton].skeleton;
   var skinAttachments = skeleton.skin.attachments;
   for (var i = 0; i < skinAttachments.length; i++) {
         var slotAttachments = skinAttachments[i];
         if (!slotAttachments) continue;
         var slot = skeleton.slots[i];
         var list = $('<select class="slot" id="'+slot.data.name+'"></select>');
         for (var j in slotAttachments) {
            var attachment = slotAttachments[j];
            // console.log(attachment.name + " belongs on slot["+i+"]: " + slot.data.name);
            var option = $("<option></option>");
         option.attr("value", name).text(attachment.name);
         list.append(option);
         }
         $("#lists").append("</br>"+slot.data.name+": "); 
      $("#lists").append(list); 
   }

   $(".slot").change(function() {
      var slot = this.id;
      var attachment = $(this).find(":selected").text();
      skeleton.setAttachment(slot, attachment);
   })
}    

setup_slotListUI();

Which gets me exactly what I want! This constructs a <select> form element for each slot, and sets the slot's name to the id of the select element. All <select> elements also have a class of ".slot" so that I can detect when they change, grab the id of that <select> element, as well as the name of select attachment so that I can equip it.

Oh, how could I grab the name of the attachment a slot has displayed at startup? If I had this information, I could make sure that when I render the list that the appropriate option will appear as selected in these form elements, in cases where the first attachment of a slot isn't necessarily the default one.

Thank you again for your help so far! Building this will definitely help me showcase my work to others and debug any visual problems I might have. There are many bits of clothing I have that I'm adding in through just modifying the json file, so building this lets my friends act as a second pair of eyes. Now they can tell me exactly which attachments need shifted! (I also hope any bit of this thread might be of use to anyone in the future.) <3

-

edit: I'm also noticing that, after I've set new attachments, if I switch the animation, the attachments are all reset to the default in each slot. (Again, I'm not using anything other than the "default" skin.) I wonder why this is happening? Here is what I've got - http://kyttias.tk/chi_avatar/ - set a gender and skin tone and then change the animation - it resets to slot defaults! D; (Also, that load time? That's why I need to be able to cache my images and why I'd rather not use atlas files at all, and only relative paths to what's currently being used.)

Also, some animations will need to have certain slot attachments changed dynamically with code. There will be multiple eye shapes/styles and while I do need to cue the 'aggressive' expression during the battle animation, it'll be like "okay, on frame 5, I need eye_style1_aggressive" ... or style2, or style3 or so on and so forth, depending on which one the player wants to be using. And in the future, eye color, as well. Variables, man. x'D