如何制作一个按钮，单击该按钮会显示 node.js 中的数据？

Question

So I've created a button, along with a table that shows data from my database. However, I want that data to appear only when the button is clicked. So when the button is clicked, I want a random row from a specific table I have in my database appear.

`<button id="breakfast2">Breakfast</button>
 <table id="mealTableContainer2">
            <thead>
                <tr>
                    <th id="mealname">Meal Name</th>
                    <th id="mealcalories">Calories</th>
                    <th id="mealtype">Type of Meal</th>
                    
                </tr>
            </thead>

            <tbody id="mealContainer2"></tbody>
  </table>`

The only Javascript I currently have is for getting my database into that table, but I really only want it to appear when I click the breakfast button. I just can't figure out how; if someone could explain it to me very simply, I'd be appreciate it a ton!

console.log('Data2 received')
$.ajax({
    url: 'http://localhost:5000' + "/read-recordsrandom",
    type: 'get',
    success: function(response) {
        var data2 = JSON.parse(response);
        if(data2.msg === "SUCCESS"){
            console.log(data2.meal)
            createMealTable2(data2.meal);
        } else {
            console.log(data2.msg);
        }
    },
    error: function(err){
        alert(err);
    }

});

}

function createMealTable2(data2) { 
var tableHTML2 = " ";
console.log("Test");
for(var i=0; i < data2.length; i++){
    tableHTML2 += "<tr>";
    tableHTML2 += "<td>" + data2[i].mealname + "</td>";
    tableHTML2 += "<td>" + data2[i].mealcalories + "</td>"
    tableHTML2 += "<td>" + data2[i].mealtype + "</td>";
    
    
    tableHTML2 += "</tr>";
}

$('#mealContainer2').html(tableHTML2);   

}

Answer 1

Hide it initially then display it

 document.getElementById("breakfast2").addEventListener('click', function(event) { document.getElementById("mealTableContainer2").classList.remove('hidden'); });

 .hidden { display: none; }

 <button id="breakfast2">Breakfast</button> <table id="mealTableContainer2" class="hidden"> <thead> <tr> <th id="mealname">Meal Name</th> <th id="mealcalories">Calories</th> <th id="mealtype">Type of Meal</th> </tr> </thead> <tbody id="mealContainer2"></tbody> </table>

Answer 2

If I'm right, by default, the table is supposed to be hide. So you can first of all, hide the table with css

Change this line to hide the table

<table id="mealTableContainer2" style="display: none;">

After that, you will need to add event listener on the button "breakfast" in javascript to display the table on click

document.getElementById("breakfast2").addEventListener("click", function() {
    document.getElementById("mealTableContainer2").style.display = "block";
});

Answer 3

Here is how you can ajax on click

NOTE: the `` are backticks used in template literal delimites and MUST be backticks

$(function() {
  const createMealTable2 = data => {
    $('#mealContainer2')
      .html(data.map(meal => `<tr>
          <td>${meal.mealname}</td>
          <td>${meal.mealcalories}</td>
          <td>${meal.mealtype}</td>
        </tr>`)
        .join("")  
      )
  };

  $("#breakfast2").on("click", function() {
    $.ajax({
      url: 'http://localhost:5000' + "/read-recordsrandom",
      type: 'get',
      success: function(response) {
        var data2 = JSON.parse(response);
        if (data2.msg === "SUCCESS") {
          createMealTable2(data2.meal);
        } else {
          console.log(data2.msg);
        }
      },
      error: function(err) {
        alert(err);
      }
    });
  })
})

<button type="button" id="breakfast2">Breakfast</button>
<table id="mealTableContainer2">
  <thead>
    <tr>
      <th id="mealname">Meal Name</th>
      <th id="mealcalories">Calories</th>
      <th id="mealtype">Type of Meal</th>
    </tr>
  </thead>
  <tbody id="mealContainer2"></tbody>
</table>

Answer 4

You need an event listener that listen for a click and than do the call to your database with asynchronous function. After the answer is returned just put it on the page using createElement or inner text of already existing html element.