Javascript/Jquery OOP Array inside of an Array
<p>In a nutshell I am making a REST call to my database and getting a list of ingredients back. The JSON looks like:</p>

<pre><code>[{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},
{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},
{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}]
</code></pre>

<p>What I want to do is transform this into a useful array that is organized as:
    <ol>
    <li>Milk
    <ol><li>2%</li><li>Skim/Fat Free</li></ol></li>
    <li>Cheese<ol><li>chedder</li></ol></li>
    </ol></p>

<p>In addition to it being ordered like that, I want to maintain the ID associated with each item. So cheese would have "2" and chedder would have "3". </p>

<p>I have been able to feed the unique values of Milk and Cheese into an array but I am not sure how to proceed. Advise would be appreciated!</p>

<p>Here's what I have so far:</p>

<pre><code>        $.ajax({
            url: "../api/IngredientChoices",
            contentType: "json",
            success: function (data) {
                var _subCategories = {};
                var _mainCategories = [];
                $.each(data, function (index, item) {
                    if ($.inArray(item.MainName, _mainCategories) === -1) {
                        _mainCategories.push(item.MainName);
                    }
                });
                $.each(_mainCategories, function () {
                    alert(this);
                });
            }
        });
</code></pre>
