title: access Spring MVC model from javascript / ajax
body: <p>After loading an html page and putting data in the model in the java code, I retrieve correctly the data from model using thymeleaf inlining: ((${data}))
  When I do the same using an ajax requestthe data is null.
  I also set a pediodic timer because of the asynchronuous call.
  the data I want to get is 'manager'</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>var intervalId = setInterval(function() {
      var myManager = [[${manager}]];
    alert("Interval reached every 5s " + myManager +  "  "+ [[${size}]]);
  }, 10000);
  
  function displayDetails(id,firstName,lastName,address,title,managerDatas,managedDatas) {
      $('.details').prop("disabled", true);
      
     document.getElementById("detailsTable").style.visibility = "visible";
     document.getElementById("saveEmployeeButtonId").style.visibility = "hidden"; 
     console.log("afficher Details");
     enable = !enable; 
  
     document.getElementById("detailledMatriculeDataLabelId").value = id;
     document.getElementById("detailledFirstNameDataLabelId").value = firstName;
     document.getElementById("detailledLastNameDataLabelId").value = lastName;
     document.getElementById("detailledAddressDataLabelId").value =  address;
     document.getElementById("detailledTitleDataLabelId").value =  title;
     if (managerDatas.includes(null)) {
          managerDatas='';
      }
      
      var mysize = [[${size}]];
      console.log("mysize " + mysize);
      
      id = parseInt(id);
      $.ajax({
          url: '/manager/'+ id ,
        
          type: 'GET',
          success: function(result) {
              console.log('manager retrieve correctly');
              var myManager = [[${manager}]];
              console.log("manager1 " + myManager);
  
              console.log("manager2 " + myManager);
              document.getElementById("detailledManagerDataLabelId").value =  myManager[0];
          },
          error: function() {
             console.log ("manager ajax failed ");
          }
      });
  
  
     if (managedDatas.includes(null)) {
          managedDatas='';
      }
     document.getElementById("detailledManagedDataLabelId").value =  managedDatas;
     
      var myEmployee = [[${employees}]];
      console.log( 'msg1' + myEmployee[0].firstName);
     
  
  }</code></pre>
  </div>
  </div>
  </p>
  <pre><code>  @GetMapping(path=&quot;/manager/{id}&quot;)
    public String  getManagedEmployees(Model model,@PathVariable int id) {
      List&lt;String&gt; employeeNames = employeesServices.findManager(id);
      StringBuffer strBuf = new StringBuffer();
      
      for (String employeeName:employeeNames) {
          System.err.println(&quot;manager &quot; +employeeName);
          String newEmployeeName = employeeName.replace(',',' ');
          strBuf.append(newEmployeeName );
      }
      System.err.println(&quot;strbuf &quot; + strBuf);
      model.addAttribute(&quot;manager&quot;, strBuf.toString());
      return &quot;/index&quot;;
  }
  </code></pre>