Dynamic Javascript generation

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

Dynamic Javascript generation

dstarh
We've just started using thymeleaf to port an existing site and I need to be able to generate some javascript for doing related select lists.  Is there any way at all to loop over a collection without a dom tag and without having to write custom processors?  Also not really interested in generating the text in my controller and passing it down to the view either.
Reply | Threaded
Open this post in threaded view
|

Re: Dynamic Javascript generation

Zemi
Administrator
No, at the moment there is no standard way to iterate inside javascript code.

As you suggest, separating the data and the code would be a simpler and cleaner approach.

Reply | Threaded
Open this post in threaded view
|

Re: Dynamic Javascript generation

dstarh
I don't know that i'd call it simpler as i'll either have to controller methods that expose the list of values that I need, or in my controller generate a string that gets output into the javascript.  

This just seems like it's a missing feature.  It's great to be able to loop with the th:each on a dom element but not being able to just arbitrarily loop in a templating engine just seems as if it's missing.
Reply | Threaded
Open this post in threaded view
|

Re: Dynamic Javascript generation

Zemi
Administrator
You could use some library, like Gson to generate JSON formatted data from Java code and let the browser parse the JSON data directly.

In my opinion, this is cleaner than iterating Java collections inside the view.
Reply | Threaded
Open this post in threaded view
|

Re: Dynamic Javascript generation

dstarh
Reply | Threaded
Open this post in threaded view
|

Re: Dynamic Javascript generation

Zemi
Administrator
I'm sure that issue will be fixed in future releases.

In the meantime, you could use th:utext as a workaround:

   < script th:utext="'var data = ' + ${jsonData}" >< /script >

Reply | Threaded
Open this post in threaded view
|

Re: Dynamic Javascript generation

danielfernandez
Administrator
In reply to this post by dstarh
Hi,

Why do you need thymeleaf to produce the javascript loop for you? I mean, what you need is thymeleaf to output some list/array objects in your context as javascript objects (in JSON notation), which is something it can do using its "javascript inlining" feature (see chapter 11 in the "Using Thymeleaf" tutorial here: http://www.thymeleaf.org/usingthymeleaf.html) and then just iterate that javascript array variable doing whatever you need to do...

For example, being "someVariable" a list of objects of some custom class, containing getter methods called "getOne()" and "getTwo()", you could have something like:

    <script th:inline="javascript">
      // <![CDATA[

        var myObjs = /*${someVariable}*/ [];
        for (var i = 0; i < myObjs.length; i++) {
          // do whatever
          alert(myObjs[i].one);
          alert(myObjs[i].two);
        }

      // ]]>
    </script>

Once executed, Thymeleaf should have correctly populated your "myObjs" variable...

    <script>
      // <![CDATA[

        var myObjs = [{"one":"Europe", "two": "North"}, {"one": "Asia", "two": "East"}];
        for (var i = 0; i < myObjs.length; i++) {
          // do whatever
          alert(myObjs[i].one);
          alert(myObjs[i].two);
        }

      // ]]>
    </script>


Is this what you are looking for?

Regards,
Daniel.
Reply | Threaded
Open this post in threaded view
|

Re: Dynamic Javascript generation

Prabhat Kumar
I tried for loop, it is not working..... I am getting this exception :

org.xml.sax.SAXParseException; lineNumber: 25; columnNumber: 16; The content of elements must consist of well-formed character data or markup.
        at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.createSAXParseException(Unknown Source)
        at com.sun.org.apache.xerces.internal.util.ErrorHandlerWrapper.fatalError(Unknown Source)
        at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(Unknown Source)
        at com.sun.org.apache.xerces.internal.impl.XMLErrorReporter.reportError(Unknown Source)
        at com.sun.org.apache.xerces.internal.impl.XMLScanner.reportFatalError(Unknown Source)
Reply | Threaded
Open this post in threaded view
|

Re: Dynamic Javascript generation

cadams
In reply to this post by dstarh
I second the need to use iteration tags with script.  We have tried the java object to js and the util throws an error on fairly simple objects within a collection.  The other way is of course to use Jackson and add the Stringified json to the model and then have to remove the escape chars.

Either way a template engine that does not have a way to do anything useful within tags seems lacking.