Cannot access object properties with dot notation JS

Question

I'm trying to access objet properties in JS function which is called after clicking on button, but i receive "undefined" in many tentative ways.

There is my HTML:

    <table id="mytable" class="mytable">
   <tr>
      <th>Candidate Name</th>
      <th>Candidate Surname</th>
      <th class="remove">Interview Type</th>
      <th>Scheduled date</th>
      <th class="remove">Feedback</th>
      <th>Detail</th>
   </tr>
   <tr th:each="interview: ${interviews}">
      <td th:text="${interview.candidateName}" />
      <td th:text="${interview.candidateSurname}" />
      <td class="remove"> <span th:if="${interview.interviewType == 1}">MOTIVAZIONALE</span>
         <span th:unless="${interview.interviewType == 1}">TECNICO</span>
      </td>
      <td th:text="${#dates.format(interview.scheduledDate, 'dd/MM/yyyy')}"/>
      <td class="remove" th:text="${interview.finalFeedback}"/>
      <!-- <td><button id="detail" type="submit"  th:value="${interview.interviewType}" class="cd-popup-trigger" >+</button></td> -->
      <!-- th:data-parameter1="${interview.id}" onclick="GotoMotivationDetail(this.getAttribute('data-parameter1'));" -->
      <td> <span th:if="${interview.interviewType == 1}"><button th:data-parameter1="${interview.motivationalFeedback}" onclick="myFunction(this.getAttribute('data-parameter1'))" type="submit" class="cd-popup-trigger">?</button></span>
         <span th:unless="${interview.interviewType == 1}"><button  type="submit" class="cd-popup-trigger2" >?</button></span>
      </td>
   </tr>
</table>

JS:

function myFunction(interview){
    var standing = interview.standing;
}

Anyone has a solution to access "interview" object properties?

`th:data-parameter1="${interview.motivationalFeedback}"` is a string, within myFunction console.log out interview and your see — Lawrence Cherone, Aug 03 '22 at 09:41
There is a method to send the entire object and access its properties in JS function? — frsv9, Aug 03 '22 at 09:54
not sure but try `onclick="myFunction(interview)"` or `onclick="((v) => myFunction(v))(interview)"` etc — Lawrence Cherone, Aug 03 '22 at 10:00
ok my bad I thought th: was some kind of clientside thing, guess its serverside, so then your issue falls into [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming), what you need to do is json.stringify or java equivalent to set the value as a plain javascript object onto the DOM, currently your values are serverside. See https://stackoverflow.com/questions/29733594/thymeleaf-print-json-string-as-json-object-into-a-javascript-variable — Lawrence Cherone, Aug 03 '22 at 10:22
If you want a JavaScript script in your web page to access Java objects processed by Thymeleaf, then you need to use [JavaScript inlining](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf#javascript-inlining) in your Thymeleaf template using ` — andrewJames, Aug 03 '22 at 13:14

score 0 · Answer 1 · answered Aug 03 '22 at 16:12

If you want to use an entire object as arguments to your function, you can't use data attributes (as they are just strings). You could however use javascript inlining to extract the entire object, then index into it like this for example:

<script th:inline="javascript">
  var interviews = /*[[${interviews}]]*/ [];
  
  function myFunction(idx){
    var interview = interviews[idx];
    var standing = interview.standing;
  }
</script>

<table id="mytable" class="mytable">
  <tr th:each="interview, status: ${interviews}">
    <td>
      <button th:data-index="${status.index}"
              onclick="myFunction(parseInt(this.getAttribute('data-index')))"
              type="submit"
              class="cd-popup-trigger">?</button>
    </td>
  </tr>
</tr>

Cannot access object properties with dot notation JS

1 Answers1