SpringBoot+Charts.js+thymeleaf でコントローラーで用意した値をグラフに表示したい

Question

前提・実現したいこと

コントローラーでビュー側で受け取る値(search)を用意したところまではできたのですが、
これをjavascriptの操作でグラフに表示するのが、どうすればいいか分からないので教えて頂きたいです。

発生している問題・エラーメッセージ

Caused by: org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "
					
					  /*<![CDATA[*/	  					
					  var ctx = document.getElementById("myPieChart");
					 
					 const search ={/*[[${search}]]*/};
					  
					  var myPieChart = new Chart(ctx,{
					    type: 'pie',
					    data: {
						
					      labels: [/*[[${search.work.workDivId}]]*/],
					      datasets: [{
					          backgroundColor: [
					              "#BB5179",
					              "#FAFF67",
					              "#58A27C",
					              "#3C00FF"
					          ],
					          data: [38, 31, 21, 10]
					      }]
					    },
					    options: {
					      title: {
					        display: true,
					        text: '-'
					      }
					    }
					  });
					  /*]]>*/
					  " - line 12, col 20)

該当のソースコード

@PostMapping("/workingHour/search")
	public String search(
			@Valid@ModelAttribute Form form,
			BindingResult result,
			Model model
			) {

    ......
		
		if(!result.hasErrors()) {
			  
		  List<WorkingHour> search = workingHourService.search(workingHour);
  
		  model.addAttribute("search",search);

	return "Form";

}else ｛
    ......
		}

試したこと

search ={/[[${search}]]/};の中身は下記のようになっており、プロパティの中に別のプロパティをもって階層構造になっています。アクセスしたいのはworkプロパティの中のworkDivIdの値なのですが、この値を表示するために labels: [/[[${search.work.workDivId}]]/]と書いているのですが、エラーとなります。
記法を調べましたが、解決が見いだせなかったので質問させて頂きました。

					
					  /*<![CDATA[*/	  					
					  var ctx = document.getElementById("myPieChart");
					 
					 const search ={[{"id":0,"type_id":0,"name":null,"stuff_id":0,"work_id":0,"workTime":"1560","workTimeSum":null,
　　　　　　　　　　　　　　　　　　　　"stuff":{"id":0,"stuffType":null,"typeId":0,"name":null,"detail":null,"registeredId":"sadf"},
　　　　　　　　　　　　　　　　　　　　"work":{"id":0,"typeId":0,"workType":null,"comment":null,"workDivId":"geawgaw"},
　　　　　　　　　　　　　　　　　　　　"dailyReportType":{"id":0,"progress":"70%"},
　　　　　　　　　　　　　　　　　　　　"dailyReport":{"id":0,"stuffId":0,"workId":0,"dailyReportType":null,"stuff":null,"work":null,"created":"2021-10-06T14:31","startTime":"2021-10-06T14:31","endTime":"2021-10-07T16:31","diff":null,"startDate":null,"endDate":null,"detail":"ega","name":null,"registeredId":null,"typeId":0},"created":"2021-10-06T14:31","date":null,"end":null}]};
					  
					  var myPieChart = new Chart(ctx,{
					    type: 'pie',
					    data: {
						
					      labels: [/*[[${search.work.workDivId}]]*/],
					      datasets: [{
					          backgroundColor: [
					              "#BB5179",
					              "#FAFF67",
					              "#58A27C",
					              "#3C00FF"
					          ],
					          data: [38, 31, 21, 10]
					      }]
					    },
					    options: {
					      title: {
					        display: true,
					        text: '-'
					      }
					    }
					  });
					  /*]]>*/
					  

補足情報（FW/ツールのバージョンなど）

SpringToolSuite
Java11
thymeleaf
Charts.js

ここにより詳細な情報を記載してください。

Answer 1

map関数を使用することで意図通りすることができました

 <div class="circlechart">
					  <canvas id="myPieChart"></canvas>
					  <script src="/js/Chart.bundle.js" th:src="@{/js/Chart.bundle.js}"></script>
					 
					  <script type="text/javascript" th:inline="javascript">
					   /*<![CDATA[*/   
					  var ctx = document.getElementById("myPieChart");
					  var search=/*[[${search}]]*/;

					const work =search.map(x=>x.work.workDivId);
					const stuff =search.map(x=>x.stuff.registeredId);
					const time =search.map(x=>x.workTime);
					console.log(work);
					  
					  var myPieChart = new Chart(ctx, {
					    type: 'pie',
					    data: {
						   
					      labels: [work[0],work[1],work[2],work[3]],
					      datasets: [{
					          backgroundColor: [
					              "#BB5179",
					              "#FAFF67",
					              "#58A27C",
					              "#3C00FF"
					          ],
					          data: [time[0], time[1], time[3], time[4]]
					      }]
					    },
					    options: {
					      title: {
					        display: true,
					        text: stuff[0]
					      }
					    }
					  });
					   /*]]>*/
					  </script>	
				    </div>