jquery read keys from type object

Question

I am trying to implement Modal in bootstrap 5. I am following the link http://jsfiddle.net/341tfz8j/1/ . I have changed all his bootstrap 4 references such as data-toggle to data-bs-toggle and data-target to data-bs-target.

Below is my function:

$(function(){
    $('#myModal').modal({
        keyboard: true,
        backdrop: "static",
        show:false,
        
    }).on('show.bs.modal', function(){
         
            
      Line 1        console.dir($(this).data()); //see the image below
       Line 2     console.log('Type of variable '+ typeof mydata); /this is object
          
         
          console.log($(this).data('myrow')); //this is undefined
        
    }); 
    
    $(".table-bordered").find('tr[data-bs-target]').on('click', function(){
        
         $('#myModal').data('myrow', $(this));
      Line 3    console.dir($('#myModal').data('myrow')); // I am able to get the row here
     });
});

When I click on the row of my table, I am able to read the entire row and store it inside the modal.data. as 'myrow'. I am even able to read the key back and get the output (Line 3)

Now i am trying to access the same data inside show method. Below is the image for Line 1

Line 2 : shows that the variable is of type object

Line 3: When I try to read it, I get undefined even though i am able to see 'myrow' key as shown in the fig.

I want to know how can i access they 'myrow' key which is stored inside the object. I have tried below and both are undefined.

$(this).data('myrow')
$(this).data.myrow

My html

 <div id="myModal"  class="modal hide fade " >
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal Title</h5>
                    <button type="button" class="close" data-bs-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                   
              <h1> content goes here</h1>
                   
                </div>
                <div class="modal-footer">
                  
                    <button type="button" class="btn btn-primary">Submit</button>
                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">cancel</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

Since $(this).data() returns an object, you may access myrow property using

$(this).data().myrow