Round to 1 decimal when displaying data within HTML

Question

I am creating a basic web application that dislays the results of some calculation in a HTML table.

Now i would like to show only 1 decimal place, but at the same time keep the calculation on the back end keeping all the decimals in memory.

<tr th:each="value : ${allvalues}">
    <td  th:text="${value.firstNumber}" ></td>
    <td  th:text="${value.secondNumber}" ></td>
</tr>

I tried to use parseFloat(${value.firstNumber}).toFixed(1) but it is not working. firstNumber and secondNumber are of type double

I think i am missing something very simple but cannot figure it out.

UPDATE 1: I am trying to use the bean as per @mehowthe suggestion.

Here is the code of my SpringBootWebApplication where i placed the bean:

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.support.SpringBootServletInitializer;
import org.springframework.context.ConfigurableApplicationContext;


import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Component;

@SpringBootApplication
@Configuration
@ComponentScan(basePackageClasses = SpringBootWebApplication.class, useDefaultFilters = true)
public class SpringBootWebApplication extends SpringBootServletInitializer {

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
        return application.sources(SpringBootWebApplication.class);
    }

    public static void main(String[] args) throws Exception {
        ConfigurableApplicationContext context = SpringApplication.run(SpringBootWebApplication.class, args);
        MathUtils mathUtils = context.getBean(MathUtils.class);

    }

    @Component
    public static class MathUtils{

         public String formatNumber(double number) {
          // or any other way to get 1 decimal place
             return new DecimalFormat("#.#").format(number); 
       } 
    }
}

The error when i get when accessing the page containing the HTML Table is this one:

2021-02-23 12:23:18.458 ERROR 22364 --- [apr-8080-exec-6] org.thymeleaf.TemplateEngine             : [THYMELEAF][http-apr-8080-exec-6] Exception processing template "index": Exception evaluating SpringEL expression: "@mathUtils.formatNumber(value.firstNumber)" (index:187)
Caused by: org.springframework.expression.AccessException: Could not resolve bean reference against BeanFactory
        at org.springframework.context.expression.BeanFactoryResolver.resolve(BeanFactoryResolver.java:48) ~[spring-context-4.3.8.RELEASE.jar:4.3.8.RELEASE]
        at org.springframework.expression.spel.ast.BeanReference.getValueInternal(BeanReference.java:55) ~[spring-expression-4.3.8.RELEASE.jar:4.3.8.RELEASE]
        ... 100 common frames omitted
Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'mathUtils' available
        at org.springframework.beans.factory.support.DefaultListableBeanFactory.getBeanDefinition(DefaultListableBeanFactory.java:687) ~[spring-beans-4.3.8.RELEASE.jar:4.3.8.RELEASE]
        at org.springframework.beans.factory.support.AbstractBeanFactory.getMergedLocalBeanDefinition(AbstractBeanFactory.java:1207) ~[spring-beans-4.3.8.RELEASE.jar:4.3.8.RELEASE]
        at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:284) ~[spring-beans-4.3.8.RELEASE.jar:4.3.8.RELEASE]
        at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:197) ~[spring-beans-4.3.8.RELEASE.jar:4.3.8.RELEASE]
        at org.springframework.context.support.AbstractApplicationContext.getBean(AbstractApplicationContext.java:1081) ~[spring-context-4.3.8.RELEASE.jar:4.3.8.RELEASE]

Presumibly there is something wrong with the bean definition or registration. Tried to figure out by myself but with no useful results.

In a tentative solution I also placed @Bean before public String formatNumber(double number) but then the project was not even getting deployed on my Tomcat local server giving the error "Consider defining a bean of type 'double' in your configuration."

Answer 1

Assuming that this question is about doing this with thymeleaf:

Register bean:

@SpringBootApplication
public class StartWebApplication {

    public static void main(String[] args) {
        SpringApplication.run(StartWebApplication.class, args);
    }

    @Bean
    public MathUtils mathUtils() {
        return new MathUtils();
    }

    public static class MathUtils {

        public String formatNumber(double number) {
            // or any other way to get 1 decimal place
            return new DecimalFormat("#.#").format(number);
        }
    }
}

Use in template:

<tr th:each="value : ${allvalues}">
    <td  th:text="${@mathUtils.formatNumber(value.firstNumber)}" ></td>
    <td  th:text="${@mathUtils.formatNumber(value.secondNumber)}" ></td>
</tr>

Answer 2

Perhaps you mean this

$("th").each(function() {
  const val = this.textContent;
  if (!isNaN(val)) this.textContent = Number(val).toFixed(1)
})