How do I make a button that, when clicked, displays data in node.js?-CodePudding

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);

}

CodePudding user response：

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" >
  <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>

CodePudding user response：

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";
});

CodePudding user response：

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.

CodePudding user response：

Here is how you can ajax on click

$(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>