Passing server side data from ejs to Ajax

Question

I've created a table with data from the server side for an admin to approve.

I'm using - MongoDB, NodeJS and Express with an EJS view. I encountered a problem when I tried to use JQuery with Ajax requests in order to pass back the unique id and an approval status of the data when the user clicks the button under approved or disapproved.

so I keep getting all the id's of the data passed back.

here's a sample of my code

<!-- EJS -->
<table class="table table-hover m-0 tickets-list table-actions-bar dt-responsive nowrap" cellspacing="0" width="100%" id="datatable">
                                                        <thead>
                                                        <tr>
                                                            <th>
                                                                <b>S/N</b>
                                                            </th>
                                                            <th><b>Name</b></th>
                                                            <th><b>Department</b></th>
                                                            <th><b>Status</b></th>
                                                            <th><b>Review</b></th>
                                                            <th><b>Approve</b></th>
                                                            <th><b>Disapprove</b></th>
                                                        </tr>
                                                        </thead>

                                                        <tbody>
                                                        <% profileData.forEach(function(item, index){ %>

                                                        <tr>
                                                            <td><b><%= index + 1 %></b></td>
                                                            <td>
                                                                <a
                                                                    <span class="ml-2"><%= item.lastname + " " + item.firstname %></span>
                                                                </a>
                                                            </td>

                                                            <td>
                                                                <a
                                                                    <span class="ml-2"><%= item.department %></span>
                                                                </a>
                                                            </td>
                                                            <% if (item.approved === 'pending'){ %>
                                                            <td>
                                                                <span class="badge badge-secondary">Pending</span>
                                                            </td>
                                                            <% } else if (item.approved === 'approved'){ %>
                                                             <td>
                                                                <span class="badge badge-success">Approved</span>
                                                            </td>
                                                            <% } else { %>
                                                             <td>
                                                                <span class="badge badge-danger">Disapproved</span>
                                                            </td> 
                                                            <% } %>

                                                            <td>
                                                                 <button type="button" class="btn btn-secondary waves-effect waves-light btn-sm"><i class=" fi-clipboard"></i></button>
                                                            </td>

                                                            <td>
                                                                <button type="button" class="btn btn-success waves-effect waves-light btn-sm" id="btn-success"><i class=" fi-check"></i></button>
                                                            </td>

                                                            <td>
                                                                <button type="button" id="disapproved" class="btn btn-danger waves-effect waves-light btn-sm"><i class=" fi-cross"></i></button>
                                                            </td>
                                                        </tr>
                                                        <% }); %>

                                                        </tbody>
                                                    </table>

jQuery/Ajax

<% profileData.forEach(function(item, index){ %>

    <script type="text/javascript">
                $(function(){               
                    $('#btn-success').click(function(e){
                        e.preventDefault();
                        console.log('select_link clicked');

                        var userId = <%- JSON.stringify(item.userId) %>;
                        console.log(userId);
                        var data = {};
                        // data.Id = userId;
                        data.message = "approved";

                        $.ajax({
                            type: 'POST',
                            data: JSON.stringify(data),
                            contentType: 'application/json',
                            url: 'http://localhost:8080/',                      
                            success: function(data) {
                                console.log('success');
                                // console.log(JSON.stringify(data));
                            }
                        });

                    });             
                });
            </script>

            <% }); %>

Answer 1

Here is another simple way: First add on each success button an id="<%= item.userId %>" and attach an onclick attribute like this.

<td>
    <button type="button" id="<%= item.userId %>" onclick="approve(this.id)" class="btn btn-success waves-effect waves-light btn-sm" id="btn-success"><i class=" fi-check"></i></button>
</td>

Then in js you can use the function this way.

<script type="text/javascript">
   function approve(id) {
       var userId = id;
       console.log(userId);
       var data = {};
       // data.Id = userId;
       data.message = "approved";

       $.ajax({
             type: 'POST',
             data: JSON.stringify(data),
              contentType: 'application/json',
              url: 'http://localhost:8080/',                      
              success: function(data) {
                  console.log('success');
                  // console.log(JSON.stringify(data));
               }
         });
    }    
  </script>

Answer 2

Ok I'll post it in answer section. On the table you shoud add an input hidden type inside each row:

<% profileData.forEach(function(item, index){ %>
<tr>
    <td><b>
            <%= index + 1 %></b>
        <input type="hidden" class="item_id" value="<%- JSON.stringify(item.userId) %>" /></td>
    <td>
        <a <span class="ml-2">
            <%= item.lastname + " " + item.firstname %></span>
        </a>
    </td>

    <td>
        <a <span class="ml-2">
            <%= item.department %></span>
        </a>
    </td>
    <% if (item.approved === 'pending'){ %>
    <td>
        <span class="badge badge-secondary">Pending</span>
    </td>
    <% } else if (item.approved === 'approved'){ %>
    <td>
        <span class="badge badge-success">Approved</span>
    </td>
    <% } else { %>
    <td>
        <span class="badge badge-danger">Disapproved</span>
    </td>
    <% } %>

    <td>
        <button type="button" class="btn btn-secondary waves-effect waves-light btn-sm"><i class=" fi-clipboard"></i></button>
    </td>

    <td>
        <button type="button" class="btn btn-success waves-effect waves-light btn-sm"><i class=" fi-check"></i></button>
    </td>

    <td>
        <button type="button" id="disapproved" class="btn btn-danger waves-effect waves-light btn-sm"><i class=" fi-cross"></i></button>
    </td>
</tr>
<% }); %>

And you only need one script section like this:

<script type="text/javascript">
            $(function(){               
                $('.btn-success').click(function(e){
                    e.preventDefault();
                    console.log('select_link clicked');

                    var userId = $(this).closest("tr").find(".item_id")
                                        .first().value;
                    console.log(userId);
                    var data = {};
                    // data.Id = userId;
                    data.message = "approved";

                    $.ajax({
                        method: 'POST',
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        url: 'http://localhost:8080/',                      
                        success: function(data) {
                            console.log('success');
                            // console.log(JSON.stringify(data));
                        }
                    });

                });             
            });
        </script>

So at this point, the event will be listen on every btn-success button, and It's only run once