java.lang.NullPointerException: null when using Spring Boot

Question

What I want to do: Input time & date from HTML, compare these values with column in DB then display data relate to time & date . If I use only time , it works. But when I add code about date and try to replace date format from yyyy-MM-dd to yyyy/MM/dd, it has an error NullPointerException .Why time has value but date1 doesn't have value and become Null .

This is my code, thanks for your help.

App Controller.java

package com.example.demo;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import com.example.demo.ProductService;
@Controller
public class AppController {    
    @Autowired
    private ProductService service;     
    @RequestMapping("/ChartLine")
    public String PostForm(@ModelAttribute(value="greeting") Greeting greeting,Model model) {       
            model.addAttribute("greeting", greeting);
            String time = greeting.getTime();
            String date = greeting.getDate();
            String date1 = date.replace('-', '/');      
            List<Object[]> listData = service.listData(time,date1);
            model.addAttribute("listData", listData);
            List<Object[]> listTime = service.listTime(time,date1);
            model.addAttribute("listTime", listTime);       
            return "ChartLine";     
    }   
}

ProductRepository.java

package com.example.demo;
import java.util.List;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.stereotype.Repository;
import com.example.demo.Product;
@Repository
public interface ProductRepository extends JpaRepository<Product, Long> {
    @Query(value="SELECT tag00 FROM Product WHERE time LIKE ?1% AND date = ?2",nativeQuery =true)
    public List<Object[]> findByTag00(String time, String date1);   
    @Query(value="SELECT time  FROM Product WHERE time LIKE ?1% AND date = ?2",nativeQuery =true)
    public List<Object[]> findByTime(String time, String date1);
}   

ProductService.java

package com.example.demo;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import com.example.demo.Product;
import com.example.demo.ProductRepository;
@Service
@Transactional
public class ProductService {

    @Autowired
    private ProductRepository repo;

    public List<Product> listAll() {
        return repo.findAll();
    }

    public List<Object[]> listData(String time, String date1) {
        return repo.findByTag00(time, date1);
    }

    public List<Object[]> listTime(String time, String date1) {
        return repo.findByTime(time, date1);
    }

    public void save(Product product) {
        repo.save(product);
    }

    public Product get(long id) {
        return repo.findById(id).get();
    }

    public void delete(long id) {
        repo.deleteById(id);
    }

}

Greeting.java

package com.example.demo;
public class Greeting {
    private String time;
    private String date;
    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time=time;
    }

    public String getDate() {
        return date;
    }

    public void setDate(String date) {
         this.date=date;
    }
}

Product.java

package com.example.demo;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Entity
public class Product {
    public int id;
    public float tag00;
    public String date;
    public String time;
    protected Product() {
    }
    protected Product(int id, float tag00, String date, String time) {
        super();
        this.id = id;
        this.tag00 = tag00;
        this.date = date;
        this.time = time;
    }
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public float getTAG00() {
        return tag00;
    }
    public void setTAG00(float tag00) {
        this.tag00 = tag00;
    }
    public String getDate() {
        return date;
    }
    public void setDate(String date) {
        this.date = date;
    }   
    public String getTime() {
        return time;
    }
    public void setTime(String time) {
        this.time = time;
    }
}

ChartLine.html

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org">

    <div  style="position:relative;left:50px;top:5px;"  > <!-- Position: relative(tuong quan theo left,right,bottom,top), absolute,fixed -->
         <a href="/home">Home</a>    
    </div> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.5.0"></script> <!-- thu vien dung de hien thi gia tri tren bieu do -->

    <div class="container">
        <canvas id="ChartLine"></canvas>
    </div>
    <div class="container">
        <canvas id="myChart" width ="350" height="350"></canvas>
    </div>

    <body>
    <div id ="container">

        <form action="#" th:action="@{/ChartLine}" th:object="${greeting}" method="post">
        Enter a date :<br>
        <select name ="time" th:field="*{time}">
          <option value="00">0h</option>
          <option value="01">1h</option>
          <option value="02">2h</option>
          <option value="03">3h</option>
          <option value="04">4h</option>
          <option value="05">5h</option>
          <option value="06">6h</option>
          <option value="07">7h</option>
          <option value="08">8h</option>
          <option value="09">9h</option>
          <option value="10">10h</option>
          <option value="11">11h</option>
          <option value="12">12h</option>
          <option value="13">13h</option>
          <option value="14">14h</option>
          <option value="15">15h</option>
          <option value="16">16h</option>
          <option value="17">17h</option>
          <option value="18">18h</option>
          <option value="19">19h</option>
          <option value="20">20h</option>
          <option value="21">21h</option>
          <option value="22">22h</option>
          <option value="23">23h</option>
        </select>
        <input type="date"  th:field="*{date}" ><br>
        <input type="submit"> 
        </form>
        <div  th:object = "${greeting}" > 
            <span  th:text = "*{time}" ></span>
            <span  th:text = "*{date}" ></span>
        </div>

        <div id ="content">
        <script th:inline="javascript"> //dung de chay js trong thymeleaf html 

            let myChart = document.getElementById('myChart').getContext('2d');
            // Global Options
            Chart.defaults.global.defaultFontFamily = 'Lato';
            Chart.defaults.global.defaultFontSize = 18;
            Chart.defaults.g
            let massPopChart = new Chart(myChart, {
              type:'line', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
              data:{
                labels:/*[[${listTime}]]*/,
                datasets:[{
                  label:'Temperature',      
                  data:/*[[${listData}]]*/,      
                  backgroundColor:'rgba(255, 99, 132, 0.6)',             
                  fill: false,
                  borderWidth:1,
                  borderColor:'rgba(255, 0, 0, 0.6)', //thay doi mau cho Line
                  hoverBorderWidth:1,
                  hoverBorderColor:'#111',
                  pointRadius: 5
                }]
              },
              options: {      
                  legend : {
                      display: false,
                  },
                  responsive :  true ,
                  maintainAspectRatio: false,         
                  plugins: { //plugin dung de hien thi gia tri len bieu do
                      datalabels: {
                            display: function(context) {
                                return context.dataIndex % 1; 
                            },
                            backgroundColor: function(context) {
                                return context.dataset.backgroundColor;
                            },
                            backgroundColor: 'rgba(255, 255, 255,0)',
                            borderRadius: 2,
                            anchor : 'start',
                            align : 'top',
                            color: 'black',
                            font: {
                                weight: 'bold'
                            },
                            formatter: Math.round
                        }
                    },
                  scales: {//scales dung de cai dat option cho cot X,Y
                      yAxes: [{
                          ticks: {
                              fontColor : 'blue'
                          },
                      }],
                      xAxes: [{
                          ticks: {
                              fontColor: 'blue'
                          },
                      }]
                  }
              }
            });    
            </script>  
        </div>      
    </div>
    </body>
</html>     

Home.html

    <!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="UTF-8" />
      <title>First Demo</title>
      <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
   </head>
   <body>
       <input type="button"  onclick="location.href='/ChartLine'" value="Line Chart" style="position:relative;width:100px"> 
       <br>
       <br>
       <input type="button"  onclick="location.href='/ChartBar'" value="Bar Chart" style="position:relative;width:100px"> 
       <br>
       <br>
       <input type="button"  onclick="location.href='/ChartPie'" value="Pie Chart" style="position:relative;width:100px"> 
   </body>
</html>

Answer 1

After some work around with Tuan Le , finally this is what happened,

This is the content of home.html in his project

   <input type="button"  onclick="location.href='/ChartLine'" value="Line Chart" style="position:relative;width:100px"> 
   <br>
   <br>
   <input type="button"  onclick="location.href='/ChartBar'" value="Bar Chart" style="position:relative;width:100px"> 
   <br>
   <br>
   <input type="button"  onclick="location.href='/ChartPie'" value="Pie Chart" style="position:relative;width:100px"> 

the problem was when tries to go to ChartLine.html

onclick="location.href='/ChartLine'"

the above code snippet is redirect to that page.

But in ChatLine.html , the form action is also "/ChartLine"

<form action="#" th:action="@{/ChartLine}" th:object="${greeting}" method="post">

So , what has happened is, the api call initiated before the form load. Then all the form field value passed as null.

As a solution we can change the RequestMapping in AppController into something like below

@RequestMapping("/ReqChartLine")

and another request method to initiate the form like this

@RequestMapping("/ChartLine")
public String ChartLineFormView(Model model){
    model.addAttribute("greeting",new Greeting());
    return "ChartLine";
}

and the ChrtLine.html form acion into

<form action="#" th:action="@{/ReqChartLine}" th:object="${greeting}" method="post">