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
– Lawrence Cherone, Commented Aug 3, 2022 at 9:41
There is a method to send the entire object and access its properties in JS function? — frsv9
– frsv9, Commented Aug 3, 2022 at 9:54
not sure but try onclick="myFunction(interview)" or onclick="((v) => myFunction(v))(interview)" etc — Lawrence Cherone
– Lawrence Cherone, Commented Aug 3, 2022 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?, 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 stackoverflow.com/questions/29733594/… — Lawrence Cherone
– Lawrence Cherone, Commented Aug 3, 2022 at 10:22

Metroids · Accepted Answer · 2022-08-03 16:12:34Z

0

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>

answered Aug 3, 2022 at 16:12

Metroids

20.6k4 gold badges49 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot access object properties with dot notation JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related