javascriptjqueryjsonjquery-tokeninput

Issue with JSON parsing a string with jquery token input


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.


Solution

  • 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);
        });
    });