无法使用点符号 JS 访问 object 属性

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?

Answer 1

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>