What java Object would give a similar javascript array in Thymeleaf?

Question

I am loading data to morris.js from thymeleaf. The data in morris.js is as shown below

data: [{
                    "period": "Jan",
                    "Users Registered": 16
                }, {
                    "period": "Feb",
                    "Users Registered": 54
                }]

How can I load this array from a model attribute?

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

        var theList = [[${usersRegistered}]]

        /*]]>*/
</script>

Answer 1

This works for me in Thymeleaf 3.

Java object:

import com.fasterxml.jackson.annotation.JsonProperty;

public class RegisteredUserPeriod {
    private String period;
    @JsonProperty("Users Registered")
    private int usersRegistered;

    public RegisteredUserPeriod(String period, int usersRegistered) {
        this.period = period;
        this.usersRegistered = usersRegistered;
    }

    public String getPeriod() {
        return period;
    }

    public void setPeriod(String period) {
        this.period = period;
    }

    public int getUsersRegistered() {
        return usersRegistered;
    }

    public void setUsersRegistered(int usersRegistered) {
        this.usersRegistered = usersRegistered;
    }
}

Controller:

model.put("usersRegistered", Arrays.asList(
        new RegisteredUserPeriod("Jan", 16),
        new RegisteredUserPeriod("Feb", 54))
);

Html:

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var theList = /*[[${usersRegistered}]]*/ [];
    /*]]>*/
</script>

Sample output:

<script type="text/javascript">
    /*<![CDATA[*/
    var theList = [{"period":"Jan","Users Registered":16},{"period":"Feb","Users Registered":54}];
    /*]]>*/
</script>