"Unexpected Identifier" when passing object resulting from ajax call
<p>I am rolling my own typeahead implementation using an input box tied to a select2 plugin.  The user will enter either a manual email address, which will then be validated with the onchange event against an email regex, or they can begin typing the DisplayName of recipients already tied to their account.  This list will be fetched via an ajax call to the controller, which then makes a service call and retrieves the data, which is then through listitems created dynamically.  If the user clicks or taps on one of the DisplayNames that are displayed, that recipient will then be added to the list of selected recipients and displayed in the select2 from that point on.</p>

<p>The typeahead and ajax calls are working correctly and the data is being returned and displayed correctly; however, I cannot seem to pass the object returned from the inital ajax call as a parameter to a function.  If I try and pass the raw value, I get an <code>'unexpected identifier'</code> error in my console debugger; if I try and pass in <code>JSON.stringify(value)</code>, I get <code>'unexpected token ;.'</code>  I can always fall back by passing in the ID property of the recipient (this works fine, it's when I try and pass complex objects that I run into difficulty) and rebuilding the object again, but it would obviously be preferable to avoid this and avoid making another service call.  Thanks in advance.</p>

<p>Here is the script:</p>

<pre><code>  $(document).ready(function () {
            $("#selectedRecipientList").select2({ tags: null, tokenSeparators: [",", " "] });
            $('.select2-input').keyup(function (e) {                    
                var currentString = $('.select2-input').val();
                $.ajax({
                    dataType: 'json',
                    url: '@Url.Action("RecipientTypeAhead", "RecipientManager")',
                    data: { query: currentString },
                    success: (function (data) {
                        $('#TypeAheadRecipientsList').empty();
                        $(data).each(function (index, value) {
                            $('#TypeAheadRecipientsList').append('&lt;li onclick="AddRecipientFromPicker(' + JSON.stringify(value) + ')"&gt;' + value.DisplayName + '&lt;/li&gt;');
                        });
                    })
                });
            });
        });

function AddRecipientFromPicker(someData){} //only ever reaches here if int primitive is passed in
</code></pre>

<p>Here is an example of what the objects look like after they are returned in the ajax method:                     <code>{"AccountName":"abc","DisplayName":"abc","Email":"abc@test.net","Id":94654}</code></p>
