Random clothes generator

For the past four years I've attended a private school which requires its students to wear ties. I've found that it's far easier to figure out what combination of shirt, pants, and tie that go together the night before, as it can sometimes be a tedious process. To make this process simpler, I had the idea to create a script to automatically generate new combinations of matching clothes.

As of now, I input all of my clothes into a JSON file, separated into arrays representing categories (shirts, pants, ties). The first element of each array is a another array, filled with all available colors/patterns in that category (red, blue, etc). For each color, there is an array ID'd by its color, consisting of an object describing what color/pattern pants/ties/sweaters go with that shirt color. Finally there is an array with the names of each type of clothing item that falls under that color. In case you didn't follow any of that, here's a section of my JSON file (full here):

"shirts": [{
    "colors": [
        "red"
    ],
    "red": [{
            "pants": [
                "navy",
                "khaki"
            ],
            "sweaters": [
                "navy",
                "grey"
            ],
            "ties": [
                "all"
            ]
        },
        [
            "Red Flannel",
            "That Other Red Flannel"
        ]
    ]
}],
...

It's a pretty tedious structure (IMO), but I can't think of a better implementation since there are multiple criteria that the matching clothes need to match. My method of creating a random combination is equally tedious:

```
$.getJSON("clothes.json", function (clothes) {
window.clothes = clothes;
var colors = clothes["shirts"][0]["colors"];
$(colors).each(function (i) {
$("#color").append("" + colors[i] + "");
});
});

function randomArrayValue(array) {
var array = eval(array);
return array[Math.floor(Math.random() * array.length)];
}

function randomClothes(

Nice idea. I really like what you've done, but some of your implementation can definitely be improved. Let's start with the JSON.

-
Some of those arrays are not needed. You wrap each clothes item in [], there's no need for this as there's just one item in the array! In fact you should only be using arrays to group like items. I'm also going to get rid of your colour array since it seems redundant (more on this later). Consider this redesign;

"shirts": {
    "red": {
       "items": [ 
         "Red Flannel",
         "That Other Red Flannel"
       ],
       "matches": {
         "pants": [
           "navy",
           "khaki"
         ],
         "sweaters": [
           "navy",
           "grey"
         ],
         "ties": [
           "all"
         ]
       }
    }
}

Do you see how that instantly makes it easier for us to look items up and iterate over matches?

Now you can remove all the [0] accessors:

Now you can select colours with: shirts[color], and iterate over matches with;

for (var match in shirts[color].matches) { 

 }

Which brings me to my next point.

-
You seem to be using bracket notation a lot to access the items in your object. When the accessor isn't a variable then you can use dot notation.

shirts[color]['matches'] === shirts[color].matches

The distinction helps us to distinguish how we're accessing the property at a glance.

-
The function randomArrayValue is using an unnecessary eval. Eval is not needed most of the time, and is often misused by new JavaScript devs. You could just do;

function randomArrayValue(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

As an aside you can also use ~~ instead of Math.floor, and it's slightly faster.

-
You're missing a lot of var statements. This is generally bad as variables declared without var are set as globals, accessible from anywhere. There's nothing as annoying as global variable bugs. You can get notiofied of issues like this by including the string 'use strict'; at the top of the program. This tells the browser to be stricter with compilation.

-
Consider literals instead of new Objects. For example:

combination = new Array(); // okay
combination = [];          // better

result = new Object(); // not great
result = {};           // awesome

-
For your result object, you'll be much better off creating an Object literal;

var result = {
  shoes: randomArrayValue(pants[currentPantColor].shoes),
  pants: currentPantColor,
  sweater: currentSweaterColor,
  tie: currentTieColor
};
combination.push(result);

-
Back to that colour object... You can get the keys of an Object using Object.keys(obj). So if you want to know all the colours that your shirts come in you can call Object.keys(clothes.shirts). If you want to iterate over all the colours then you can for...in:

for (var colour in clothes.shirts) {
  var items = clothes.shirts[colour].items,
    matches = clothes.shirts[colour].matches;
}

That's enough to start with, let me know if you'd like me to point out how you can take advantage of some of these designs within your solution.

StackExchange Code Review Q#41238, answer score: 23