jquery syntax help processing ajax data
<p>I have two <code>form</code> tags. The second one pre-populates with options depending on the choice made in the first one, by making an Ajax request.</p>

<p>The data is returning perfectly and actually pre-populates the second <code>form</code> if I pass an example of some returned data to a local variable (see commented line). </p>

<p>Any advice would be appreciated as I am very new to JavaScript and am probably missing something blatantly obvious! I am using the following code:</p>

<pre><code>$(document).ready(function() {
    $('#table').change(function() {
        $.getJSON("/ajax_get", {
            id : $(this).val(),
            ajax : 'true'
        }, function(data) {
            /*
            var data = [
                { 
                    "optionValue":"actor_id", 
                    "optionDisplay": "actor_id"
                },
                {
                    "optionValue":"film_id", 
                    "optionDisplay": "film_id"
                },
                {
                    "optionValue":"priority", 
                    "optionDisplay": "priority"
                }
            ];
            */
            var $persons = $('#fields').empty();
            $.each(data, function() {
                $persons.append("&lt;option value=" + this.optionValue + "&gt;" + this.optionDisplay + "&lt;/option&gt;");
            });
        });
    });
});
</code></pre>
