Issue with JSON parsing a string with jquery token input

Question

I am using jquery token input in one of my project. Following is my way of initiating the tokeninput.

    $(document).ready(function(){
    var defaultOptions = {  searchDelay: 500,
                            minChars: 3,
                        };
    $('.tokeninput').each(function () {
        var field = $(this),
            dataOptions = field.data('tokenoptions');
            if(dataOptions){
                defaultOptions = $.extend(defaultOptions, dataOptions);
            }                   
            console.log(defaultOptions);
        field.tokenInput("url_to_live_search', defaultOptions);
    });
});  

I am then passing additional parameters using a "data" attribute in my input field

<input value="105" name="institution_id" required="required" class="tokeninput" data-tokenoptions="<?php echo json_encode(['tokenLimit'=>1,'allowFreeTagging'=>true]);?> type="text">

Its working fine so far. But when I am trying to pass prePopulate parameters also through data options, as below, I am getting an error.

<input value="105" name="institution_id" required="required" class="tokeninput" data-tokenoptions="<?php echo json_encode([tokenLimit] => 1, [allowFreeTagging] => 1, [prePopulate] => {"id":105,"name":"Institution Title"});?> type="text">

Error Uncaught TypeError: Cannot use 'in' operator to search for 'length' in {"id":105,"name":"Institution Title"}

I have done a search on this issue and found that the problem is because of not parsing the JSON. I tried some modifications to my initiator. But its not working. Any help will be appreciated.

Answer 1

I made following changes to my initiator and its working. But I am not sure whether this is the right way. Can you guide.

    $(document).ready(function(){
    var defaultOptions = {  searchDelay: 500,
                            minChars: 3
                        };
    $('.tokeninput').each(function () {
        var field = $(this),
            dataOptions = field.data('tokenoptions');
            if(dataOptions){
                var populateValue = dataOptions.prePopulate;
                if(populateValue){
                    dataOptions = jQuery.grep(dataOptions, function(a) {
                        return a !== 'prePopulate';
                    });
                    populateValue = $.parseJSON(populateValue);
                    dataOptions = $.extend(defaultOptions, {prePopulate:[populateValue]});                                              
                }
                defaultOptions = $.extend(defaultOptions, dataOptions);
            }                   
            console.log(defaultOptions);
        field.tokenInput("url_to_live_search", defaultOptions);
    });
});