Retrieving table content data in ember

Question

I am creating an ember application which gets data from servlet and prints it in a table format.. the table looks like this

Capacity Price  RoomType    RoomNo  Action
6        4150   suite         93    Select
2        1579   villa          5    Select
1        1526   villa          1    Select

When I click select I need to get the value in the room no. I tried creating a tracked variable and updating the value but got stuck, so any idea how I can do it in ember would be appreciated. I found an article which uses jQuery to do the same but I don't know how to add jQuery to an ember application.

Myy handlebar file

{{#if this.request.isPending}}
  loading data...
{{/if}}
<main class="conttainer mt-5 ">

<container class="cond">
<table border="1|0" class = "tab">
  <thead>
    <tr>
      <th><td>Capacity</td></th>
      <th><td>Price</td></th>
      <th><td>RoomType</td></th>
      <th><td>RoomNo</td></th>
      <th><td>Action</td></th>
    </tr>
  </thead>
  <tbody>
   
    {{#each this.result as |row|}}    
      <tr>
        {{#each-in row as |key value|}}
          <td>{{value}}</td>
          
        {{/each-in}}
        <td><button  class = "btn-test" {{on "click" (this.getroomno) {{value}}>Select</button></td>//--> wrong decleration yet i dont know how to access the roomno column
        
      </tr>
    {{/each}}
  </tbody>
</table>
</container>
<form>
  <table>
    <tr>
      <td><h5>room number</h5></td>
    </tr>
    <tr><td>{{this.room}}</td></tr>//---> i have to show the value here
    <tr><td><b>Enter the Start Date</b></td></tr>
    <tr><td><input type = "date" placeholder="yyyy-mm-dd" id = "sdate" value = "2022-07-01" min = "2022-07-01" max = "2022-07-31"></td></tr>
    <tr><td><b>Enter the End Date</b></td></tr>
    <tr><td><input type = "date" placeholder="yyyy-mm-dd" id = "edate" value = "2022-07-01" min = "2022-07-01" max = "2022-07-31"></td></tr>
    <tr><td><button type = "button" {{action "get"}}>submit</button></td></tr>
  </table>
</form>

</main>

My controller file

class RequestState {
  @tracked value;
  @tracked error;

  get isPending() {
    return !this.error && !this.value;
  }
}

export default class RoomselectController extends Controller {
  @service router;
  @tracked room =0;
  getroomno(value){
    var that = this;
    console.log(value);
    that.room = value;
    console.log(that.room)
  }

  @use request = resource(({ on }) => {
    const state = new RequestState();
    var dis = this;
    $.ajax({
      url: 'http://localhost:8080/hotelres/My',
      method: 'GET',
      dataType: 'json',
      success: function(response){ 
        console.log(response)
        if(response == 0){
          dis.transitionToRoute("error");
        }else{
          state.value = response
        }
      },
      error: (xhr, status, error) =>
        (state.error = `${status}: ${xhr.statusText}`),
    });

    return state;
  });

  get result() {
    return this.request.value || [];
  }

I need to render the room number when the select button is pressed.

Answer 1

In your row, I see:

<td><button class="btn-test" {{on "click" (this.getroomno) {{value}}>Select</button></td>

which would invoke this.getroomno before passing a "handler" to the on click event listener. (and then {{value}} should be a syntax error? because there are two opening {{ and one closing }}

For more information on this syntax, see: this cheatsheet

I think you want something more like:

<td>
  <button 
    class="btn-test" 
    {{on "click" (fn this.getroomno row)>
    Select
  </button>
</td>

Docs on fn are here

fn partially applies row to getroomno, so when invoked, getroomno will be passed the row and the click event will be the last argument (if needed)