jQuery getJSON not populating HTML select properly
<p>I have an HTML <code>&lt;select&gt;</code>:</p>

<pre><code>&lt;div id="content"&gt;
    &lt;input type="button" id="get-btn" onclick="getData();"/&gt;
    &lt;select id="attrib-type-sel"&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>When the user clicks the following button, I want to use jQuery's <code>getJSON</code> method to hit my server, pull back data, and populate the <code>&lt;select&gt;</code> with options:</p>

<pre><code>$(document).ready(function() {
    $.getJSON(
        "some/url/on/my/server",
        function(data) {
        var optionsHTML = "";
        var len = data.length;
        for(var i = 0; i &lt; len; i++) {
            optionsHTML += '&lt;option value="' + data[i] + '"&gt;'
                + data[i] + '&lt;/option&gt;';
        }

        $('#attrib-type-sel').html(optionsHTML);
    });
});
</code></pre>

<p>When I run this code, in Firebug, I see that the AJAX call is successful and returns the following JSON:</p>

<pre><code>[
    {
        "id":1,
        "name":"Snoopy",
        "tag":"SNOOPY",
        "allowsAll":false
    }
]
</code></pre>

<p>(Only returns 1 record).</p>

<p>However, when back in the UI, when this code fires it creates a <code>&lt;select&gt;</code> that has 1 options whose inner HTML reads <code>[object Object]</code>.</p>

<p>Can anyone spot what is going on here? It looks like my <code>getJSON</code> is OK, but the code to extract the JSON from the results and use it to populate my select is buggy. Thanks in advance!</p>
