Develop Reference

How to ouput a json string in the js section of a html file using thymeleaf

I have a project with Java 8, bringing data to the frontend with Thymeleaf. The data entity I want to ouput in my frontend is calles logs and is a list of entities that have an attribute containig json data. I output it in the html file as follows:
<script type="text/javascript">
let logs = [[${logs}]];
</script>
The json has the following structure:
{
"oldest": 712367620,
"youngest": 712378606,
"measurements": []
}
But on the page it appears with the double quotes escaped which completely messes up the js:
<script type="text/javascript">
let logs = [LogEntity(id=52, success=true, runtimes={
"oldest" : 712367620,
"youngest" : 712378606,
"measurements" : []
})]
</script>
How can I prevent the escaping of the double quotes in the json string?
I work with php and twig in another project and there it is as simple as {{ logs|raw }}. Is there some kind of modifier in thymeleaf like |raw in php twig?
Security is not an issue since I have complete control over the data objects.

You have to enable JavaScript inlining with th:inline="javascript":
<script type="text/javascript" th:inline="javascript">
let logs = [[${logs}]];
</script>
(I'm not sure what you mean by "json data". Do you mean you have a String that contains JSON?)

Fetchinng JSON data from servlet to display on JSP [duplicate]

I have a form in JSP. I have to populate it based on the request object (from the servlet). How do I use Java Script for accessing request object attributes or if you can suggest me any other better way to populate form dynamically?

You need to realize that Java/JSP is merely a HTML/CSS/JS code producer. So all you need to do is to just let JSP print the Java variable as if it is a JavaScript variable and that the generated HTML/JS code output is syntactically valid.
Provided that the Java variable is available in the EL scope by ${foo}, here are several examples how to print it:
<script>var foo = '${foo}';</script>
<script>someFunction('${foo}');</script>
<div onclick="someFunction('${foo}')">...</div>
Imagine that the Java variable has the value "bar", then JSP will ultimately generate this HTML which you can verify by rightclick, View Source in the webbrowser:
<script>var foo = 'bar';</script>
<script>someFunction('bar');</script>
<div onclick="someFunction('bar')">...</div>
Do note that those singlequotes are thus mandatory in order to represent a string typed variable in JS. If you have used var foo = ${foo}; instead, then it would print var foo = bar;, which may end up in "bar is undefined" errors in when you attempt to access it further down in JS code (you can see JS errors in JS console of browser's web developer toolset which you can open by pressing F12 in Chrome/FireFox23+/IE9+). Also note that if the variable represents a number or a boolean, which doesn't need to be quoted, then it will just work fine.
If the variable happens to originate from user-controlled input, then keep in mind to take into account XSS attack holes and JS escaping. Near the bottom of our EL wiki page you can find an example how to create a custom EL function which escapes a Java variable for safe usage in JS.
If the variable is a bit more complex, e.g. a Java bean, or a list thereof, or a map, then you can use one of the many available JSON libraries to convert the Java object to a JSON string. Here's an example assuming Gson.
String someObjectAsJson = new Gson().toJson(someObject);
Note that this way you don't need to print it as a quoted string anymore.
<script>var foo = ${someObjectAsJson};</script>
See also:
Our JSP wiki page - see the chapter "JavaScript".
How to escape JavaScript in JSP?
Call Servlet and invoke Java code from JavaScript along with parameters
How to use Servlets and Ajax?

If you're pre-populating the form fields based on parameters in the HTTP request, then why not simply do this on the server side in your JSP... rather than on the client side with JavaScript? In the JSP it would look vaguely like this:
<input type="text" name="myFormField1" value="<%= request.getParameter("value1"); %>"/>
On the client side, JavaScript doesn't really have the concept of a "request object". You pretty much have to parse the query string yourself manually to get at the CGI parameters. I suspect that isn't what you're actually wanting to do.

Passing JSON from JSP to Javascript.
I came here looking for this, #BalusC's answer helped to an extent but didn't solve the problem to the core. After digging deep into <script> tag, I came across this solution.
<script id="jsonData" type="application/json">${jsonFromJava}</script>
and in the JS:
var fetchedJson = JSON.parse(document.getElementById('jsonData').textContent);

In JSP file:
<head>
...
<%# page import="com.common.Constants" %>
...
</head>
<script type="text/javascript">
var constant = "<%=Constants.CONSTANT%>"
</script>
This constant variable will be then available to .js files that are declared after the above code.
Constants.java is a java file containing a static constant named CONSTANT.
The scenario that I had was, I needed one constant from a property file, so instead of constructing a property file for javascript, I did this.

In JSP page :
<c:set var="list_size" value="${list1.size() }"></c:set>
Access this value in Javascipt page using :
var list_size = parseInt($('#list_size').val());
I added javascript page in my project externally.

Converting local JSP page into global web page without modifying the source code?

I have designed a product recommendation hub using Java and JavaScript in Eclipse. Basic functionality is, if the person enters the product name, it will retrieve the relevant product reviews from the local XAMPP database, perform sentiment analysis on it and dispalys whether the product is recommended or not based on the number of positive or negative sentiments. My questions:
Is it possible to convert this local JSP UI page into a globally accessible web page without modifying my java code?
If Yes, please guide me. If No, please justify to get a clear understanding.
Is it possible using Amazon AWS?

You could load the page via ajax/jquery.
In the target page, create a div tag that will be your placeholder:
<div id="myPlaceholder"></div>
and add some javascript like:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$.get("/theurlofthecurrentpage?some=thing", function(data) {
$("#myPlaceholder").html(data);
});
});
</script>
If the JSP control does full postbacks, you may have to update it to handle it clientside. hopefully this helps.

Java/Scala: understanding Play framework custom tag or helper

I've been using Play 2.0 framework for a couple of days now for a proof of concept application at my job. One of the first things I wanted to check out was the custom tag functionality, since it reminded me of HtmlHelpers in ASP.Net MVC. The thing is that I can't seem to make them work and was wondering if I'm misusing the feature or misunderstanding something.
Here's a simple example of what I want to do: I want to be able to use #script("scriptname.js") anywhere in the templates and have that subsitute the entire tags.
Here's what I got so far:
main.scala.html
#(title: String, scripts: Html = Html(""))(content: Html)
#import tags._
<!DOCTYPE html>
<html>
<head>
<!-- this is how I would like to use the helper/tag -->
#script("jquery.js")
#script("jquery-ui.js")
<!-- let views add their own scripts. this part is working OK -->
#scripts
</head>
<body>
#content
</body>
</html>
I created a subdirectory called "tags" under the app/views directory. There I created my script.scala.html tag/helper file:
#(name: String)
<script src="#routes.Assets.at("javascripts/#name")" type="text/javascript"></script>
The problem I'm having is that whenever I use #script() the output includes the #name parameter in it. For example #script("x.js") actually outputs
<script src="assets/javascripts/#name" type="text/javascript"></script>
What am I doing wrong?
For the record, I did read the documentation and search here, but neither of these links have helped me figure this out:
http://www.playframework.org/documentation/2.0.3/JavaTemplateUseCases
How to define a tag with Play 2.0?

#routes.Assets.at(...) evaluates the Scala expression routes.Assets.at(...) and substitutes the result into your output. There is no recursive evaluation that would allow you to have evaluate an expression textually to get that expression, which seems to be what you're expecting.
What you intend to do is achieved using
#routes.Assets.at("javascripts/" + name)

Pass Java Variables to Javascript Without Using Inline JS

Is this possible? I want to be able to pass java bean data into javascript objects, but I'd really prefer not to muck up my jsp pages with a bunch of inline script tags. I like to keep my javascript separate in external files, but how do you accomplish something like this without using inline js?
<script type="text/javascript">
var variableFromServer = '${someBean.someProperty}';
</script>

You can create a JSON file with all the data and either include it inline or fetch the JSON through Ajax - that way you don't clutter the markup with data. See http://json-taglib.sourceforge.net/ for an example of a JSP-JSON template.

I'm not sure if this is worth it but one alternative will be to set the desired value in an input filed with type="hidden" and get it's in js. But this will also pass this parameter in GET and POST request from the form.

You can either do what you're doing in the snippet (do you consider that "inline JS"?), create a div of JSON with data in it (exposed as a single string) and process it, pass JS files through the JSP process (or use a different templating system for dynamic JS pages), etc.
I'm not a huge fan of processing JS files through JSP; I'll often create an object containing all the info my JS needs in a <script> tag at the bottom of the body before including my real JS. It's kind of lazy, but it's straight-forward.

One option that I've used in the past is to configure the servlet container to run the JSP interpreter on *.js files. How to set this up will depend upon what server you are running.
Note that if you want to access any request attributes this way you will need to set them up as part of the request that fetches the JavaScript file(s) (i.e. you will have to have a servlet in front of your JavaScript...or as an alternative you can use an include directive to bring in the scripts instead of a <script src='...'> tag). Session attributes you can access without needing to have a custom servlet in front of your JavaScript files.

I'm a fan of doing it the simple and easy way, so I'd create a single script element that has a minimal number of JS variables set from Java - ideally a single JS variable that is set to an object with different properties for all the different bits of data you need to pass through. Your Java code basically just outputs JSON that will be interpreted as an object literal in the JS. Immediately after that include any external scripts - because they're included afterwards they can use the variables already created.
You can put the above in the head or at the end of the body. (Or in the middle, but that doesn't really make sense.)
<html>
<head>
</head>
<body>
<!-- actual HTML markup here -->
<script>
var variableFromServer = '${someBean.someProperty}',
objectFromServer = /* jsp to spit out JSON here as appropriate */ ;
</script>
<!-- external files included after the above will be able to access
those variables -->
<script src="external1.js" type="text/javascript"></script>
<script src="external2.js" type="text/javascript"></script>
<script src="etc.js" type="text/javascript"></script>
</body>
</html>
You certainly don't need "a bunch of inline script tags" - even if it doesn't make sense to put all the values in a single object at least create all the variables in a single script element, and then all of your other JS can be in an external file.
(Add namespacing as required.)