title: How to pass a value back from Java controller to Thymeleaf front-end?
body: <p>I am building an application that when the user selects a value from a <code>select</code> tag, then the user is prompted with another <code>select</code> tag with corresponding data. I achieve this by grabbing the data from the first field and using Ajax to pass it back to my controller and then compute it and send back new data. However, I am having difficulty sending the object back. I am not sure if I am doing it right. I tried using <code>model.addAttribute()</code> but I believe I set it up wrong.</p>
  
  <p><strong>Tools:</strong></p>
  
  <pre><code>Java 
  Spring Boot
  Thymeleaf
  Bootstrap
  </code></pre>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code> @RequestMapping(value="/ajax/searchUserProfiles.html",method=RequestMethod.POST)
          public  @ResponseBody void getSearchUserProfiles(@RequestBody TestApp mTestApp, HttpServletRequest request) {
              String val = mTestApp.getDtoTiername();
              List&lt;String&gt; t1 = new ArrayList&lt;String&gt;();
  
              for(TestApp temp: exampleAry) {
  
                  if(temp.getDtoTiername().equalsIgnoreCase(val)) {
                      t1.add(temp.getDtoSystem());
                  }
              }
  
              //I want to return t1 to my select tag in my front-end
  
          }
  </code></pre>
  
  <p><strong>Ajax:</strong></p>
  
  <pre><code>  function searchText() {
         var search = {
            "dtoTiername" : "Web"  
         }
  
         $.ajax({
             type: "POST",
             contentType : 'application/json; charset=utf-8',
             dataType : 'json',
             url: "/ajax/searchUserProfiles.html",
             data: JSON.stringify(search), // Note it is important
             success :function(result) {
             // do what ever you want with data
             }
         });
    }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="col col-lg-9 search-bar"&gt;
                &lt;div class="form-group"&gt;                 
                    &lt;label&gt;Tier:&lt;/label&gt;                           
               &lt;select class="js-example-basic-single" th:field="*{ary4}" id="selectData1"&gt;
                           &lt;option value=""&gt;&lt;/option&gt;
                           &lt;option th:each="ary4 : ${ary4}"
                              th:value="${ary4.dtoTiername}"
                              th:text="${ary4.dtoTiername}"/&gt;
                    &lt;/select&gt;
                      &lt;div class="text-right"&gt;
  
                  &lt;/div&gt; 
                &lt;/div&gt; 
            &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="row"&gt;
              &lt;div class="col col-lg-9 search-bar"&gt;
                  &lt;div class="form-group"&gt;                 
                      &lt;label&gt;Type:&lt;/label&gt;              
                     &lt;select class="js-example-basic-single" th:field="*{t1}" id="selectData2"&gt;
                           &lt;option value=""&gt;&lt;/option&gt;
                           &lt;option th:each="t1 : ${t1}"
                              th:value="${t1.dtoTiername}"
                              th:text="${t1.dtoTiername}"/&gt;
                    &lt;/select&gt;
  
                        &lt;div class="text-right"&gt;
  
                    &lt;/div&gt; 
                  &lt;/div&gt; 
              &lt;/div&gt;
            &lt;/div&gt;      
  </code></pre>