Passing Data into HTML from Java Via Spring

Passing data into html from Java via Spring

I figured it out. I was missing a dependency:

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

Passing value from controller to html in spring

Change

<p align="center">?????</p>

<p align="center">${stream}</p> OR <p th:text="${stream}"></p>

How it is working?

You can access variables value by ${key}.

Example

model.addAttribute("key", value);

Get value by ${key} in HTML

In Thymeleaf, these model attributes (or context variables in
Thymeleaf jargon) can be accessed with the following syntax:
${attributeName}, where attributeName in our case is stream. This
is a Spring EL expression. In short, Spring EL (Spring Expression
Language) is a language that supports querying and manipulating an
object graph at runtime.

UPDATE

The th:field attribute can be used on input, select, or, textarea.

Replace ????? with

<input type="text" id="stream" name="stream" th:value="${stream}" />

<input type="text" th:field="*{stream}" />`

<input type="text" id="stream" name="stream" th:field="*{stream}" th:value="${stream}" />

Also try [[${stream}]]; 

Thymeleaf Document Thymeleaf Document Inputs

UPDATE 2

Get value from Thymeleaf to Spring Boot

<form th:action="@{/send}" method="get">
   <textarea  th:name="doc" rows="10" cols="100" name="doc"></textarea>
   <button type="submit">Send</button>
</form>

    @GetMapping("/send")
    public String send(@RequestParam(name="doc", required = false) String doc) {
        //change required = false as per requirement
        System.out.println("Doc: "+doc);
        return "textarea-input";
    }

Note: use "th:field" for Entity/Model

Pass data from Spring Boot app into javascript function

Suppose you have a class Point:

public class Point {
   double lat;
   double lng
   // getters omitted
}

Further your servlet/controller passes a list of points as attribute listPoints to the Thymeleaf page, so that it shows in your table:

    <tbody>
        <th:block th:each="point : ${listPoints}">
            <tr>
                <td>[[${point.lat}]]</td>
                <td>[[${point.lng}]]</td>
            </tr>
        </th:block>
    </tbody>

In your JavaScript (wherever this lays) you have to call the addMarker function for each of all those coordinates.
For example:

addMarker({lat:50.772775,lng:3.889969});

for the first point and so on.

You could pass the points inside a javascript-inlining block to your Thymeleaf page:

<script th:inline="javascript">
    var points = /*[[${listPoints}]]*/ null;
    console.log(points);  // just a debug print to verify all points received
    points.forEach(p => addMarker(p));
</script>

Now you have to make sure that this script with populated points is loaded in the correct order (when addMarker function is ready to add markers on the map). You can also wrap this inside a function that is invoked onload.

Passing Data into HTML from Java Via Spring