Question

I am using Jquery Tokeninput in my project to display some numbers in a textarea. I have a hidden input field in which I save the JSON string containing the numbers.
The JSON looks like

patents = [{"id":"AT02708872"},{"id":"DE60232348"},{"id":"EP02708872"},{"id":"SE0101087"},{"id":"SE0200504"}] 

in my view the hidden input is

  <input id="appln_nrs" type="hidden" value="{{ patents }}" />

In the same view I pass the value of this input to my JQuery Tokeninput as

<script type="text/javascript">
    $(document).ready(function() {
        var patents = $("#appln_nrs").val();
        //var patents = [{id:"ABC"},{id:"DEF"}];
        $("#patents").tokenInput("", {
            theme:"facebook",
            prePopulate: patents
        });
    });
</script>

The problem is the JSON contains only 5 entries with id and its value, but when I am on the view it display something like this in the textarea

But when I pass some hard coded JSON to patents variable it is displayed properly.

Any help will be highly appreciated.

Thanks

Edit

When I use in my javascript like

 var patents = {{ patents }};

it gives me the following syntax error

  SyntaxError: invalid property id
  [Break On This Error]     

  var patents = [{"id":"AT.02708872.T"},{"id":"... 

Answer 1

Don´t use a hidden field. Just do:

<script type="text/javascript">
    $(document).ready(function() {
        var patents = {{patents|raw}};
        //var patents = [{id:"ABC"},{id:"DEF"}];
        $("#patents").tokenInput("", {
            theme:"facebook",
            prePopulate: patents
        });
    });
</script>