How to pass a list/array from thymleaf's th:onclick method to a javascript function

Question

Here is what I am trying to do:

<ul id="loadavg_ul">
  <a href="#" th:each="LoadAvgCoordinates:${LoadAvgCoordinatesList}"
    th:data1=${LoadAvgCoordinates.subDir}
    th:data-xaxis=${LoadAvgCoordinates.xaxis} <<< this is an array/list
    th:data-yaxis=${LoadAvgCoordinates.yaxis} <<< this too is an array/list
    th:onclick="javascript:drawLoadavg(this.getAttribute('data1'),this.getAttribute('data-xaxis'),
    this.getAttribute('data-yaxis'))">
  <li th:text="${LoadAvgCoordinates.subDir}">LoadAvgCoordinate.subDir</li>
  </a>
</ul>

Javascript Fucntion:

function drawLoadavg(subDir, xaxis, yaxis) {
  document.getElementById("landing_zone").innerHTML =
    "Drawing loadavg for sub dir: " + subDir;
  var ul = document.createElement("ul");
  ul.setAttribute("id", "proList");
  document.getElementById("renderList").appendChild(ul);
  for (var i = 0; i < xaxis.length; i++) {
    renderXAxis(xaxis[i]);
    console.log(xaxis[i]);
  }
  //xaxis.forEach(renderXAxis); <<< same prob

  function renderXAxis(element, index, arr) {
    var li = document.createElement("li");
    li.setAttribute("class", "item");
    ul.appendChild(li);
    li.innerHTML = li.innerHTML + element;
  }
}

Actual array is:

xaxis = [
  "2021-05-24 17:04:31",
  "2021-05-24 17:07:44",
  "2021-05-24 17:13:06",
  "2021-05-24 17:25:52",
  "2021-05-24 17:27:58",
];

&

yaxis = [6.46, 10.97, 10.33, 6.42, 6.11];

but in console it gives:

[
"
2
...
2
4   << seems to be space delimited**

Answer 1

I personally wouldn't try passing JavaScript information into data attributes. Just let Thymeleaf serialize it and process it from there. For example, this worked for me:

<script th:inline="javascript">
  var coordinateList = [[${LoadAvgCoordinatesList}]];
</script>

<ul id="loadavg_ul">
  <a href="#" th:each="LoadAvgCoordinates, s:${LoadAvgCoordinatesList}"
     th:data-index="${s.index}"
     onclick="javascript:drawLoadavg(
               coordinateList[parseInt(this.getAttribute('data-index'))].subDir,
               coordinateList[parseInt(this.getAttribute('data-index'))].xaxis,
               coordinateList[parseInt(this.getAttribute('data-index'))].yaxis
  )">
    <li th:text="${LoadAvgCoordinates.subDir}">LoadAvgCoordinate.subDir</li>
  </a>
</ul>