Array displayed inside Html table

I got this code for an array an infinite array in javascript and I can add more to it delete from it update elements inside of it.
I need to show that array as a table in html page the design does not matter I can work on that.

I am only allowed to use JavaScript not jQuery, I’m really not sure what to do here.

let students = [];
let x = 0;
document.getElementById("submit").addEventListener("click", (e) => {
  e.preventDefault();
  let nameInputEl = document.getElementById("name");
  let idInputEl = document.getElementById("idNumber");
  let gdpaInputEl = document.getElementById("gdpa");

  // Validation for input
  inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);

  // insert student
  if (x == 1) {
    insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
  }

  // Show success message
});

function inputValidation(name, id, gdpa) {
  // check for the value of each element

  if (name == "") {
    document.getElementById("Error101").style.display = "block";
  } else if (id == "") {
    document.getElementById("Error101").style.display = "block";
  } else if (gdpa == "") {
    document.getElementById("Error101").style.display = "block";
  } else {
    document.getElementById("Succes101").style.display = "block";
    x = 1;
  }
  setTimeout(function() {
    document.getElementById("Error101").style.display = "none";
    document.getElementById("Succes101").style.display = "none";
  }, 3000);
}

function insertStudent(name, id, gdpa) {
  let student = {
    name: name,
    id: id,
    gdpa: gdpa,
  };
  students.push(student);
  console.log("students array: ", students);
  x = 0;
}

function showList() {
  students.forEach(element => {
    document.getElementById("showLi").innerHTML = (students);
  });
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="assets/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>School Managment System</title>
</head>

<body>
  <div class="container">
    <div class="big-title">
      <h2 class="title">Assignment</h2>
      <span class="ligne"> </span>
    </div>
    <div class="big_box col-md-12">
      <form>
        <!-- student name -->
        <div class="from-control col-md-4">
          <label for="name" class="Name_Label">Student Name</label>
          <input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
        </div>
        <!-- student name -->

        <!-- student id -->
        <div class="from-control col-md-4">
          <label for="idNumber" class="NO_Label">Student ID</label>
          <input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
        </div>
        <!-- student id -->

        <!-- student gdpa -->
        <div class="from-control col-md-4">
          <label for="gdpa" class="gp_Label">Student GDPA</label>
          <input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
        </div>
        <!-- student gdpa -->
        <div class="col-md-12">
          <button id="submit" type="submit">Add</button>
          <button id="list" id="list" type="button" onclick="showList()">Show</button>
        </div>
      </form>
    </div>

  </div>
  <div id="ShowLi"></div>



  <div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
  <div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>

  <script src="./src/main.js"></script>
</body>

</html>

3 thoughts on “Array displayed inside Html table”

  1. let students = [];
    let x = 0;
    document.getElementById("submit").addEventListener("click", (e) => {
      e.preventDefault();
      let nameInputEl = document.getElementById("name");
      let idInputEl = document.getElementById("idNumber");
      let gdpaInputEl = document.getElementById("gdpa");
    
      // Validation for input
      inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
    
      // insert student
      if (x == 1) {
        insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
      }
    
      // Show success message
    });
    
    function inputValidation(name, id, gdpa) {
      // check for the value of each element
    
      if (name == "") {
        document.getElementById("Error101").style.display = "block";
      } else if (id == "") {
        document.getElementById("Error101").style.display = "block";
      } else if (gdpa == "") {
        document.getElementById("Error101").style.display = "block";
      } else {
        document.getElementById("Succes101").style.display = "block";
        x = 1;
      }
      setTimeout(function() {
        document.getElementById("Error101").style.display = "none";
        document.getElementById("Succes101").style.display = "none";
      }, 3000);
    }
    
    function insertStudent(name, id, gdpa) {
      let student = {
        name: name,
        id: id,
        gdpa: gdpa,
      };
      students.push(student);
      console.log("students array: ", students);
      x = 0;
    }
    
    function showList() {
      const resultElement = document.getElementById("showli");
      while(resultElement.firstChild && resultElement.removeChild(resultElement.firstChild));
      var table = document.getElementById("showli").appendChild( document.createElement('table') );
      students.forEach((element, i) => {
        var row = table.insertRow(i);
        var j = 0;
        for (const v of Object.keys(element)) {
          row.insertCell(j).innerText = element[v];
          j++;
        }
      });
    }
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
      <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
      <link rel="stylesheet" href="assets/style.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>School Managment System</title>
    </head>
    
    <body>
      <div class="container">
        <div class="big-title">
          <h2 class="title">Assignment</h2>
          <span class="ligne"> </span>
        </div>
        <div class="big_box col-md-12">
          <form>
            <!-- student name -->
            <div class="from-control col-md-4">
              <label for="name" class="Name_Label">Student Name</label>
              <input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
            </div>
            <!-- student name -->
    
            <!-- student id -->
            <div class="from-control col-md-4">
              <label for="idNumber" class="NO_Label">Student ID</label>
              <input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
            </div>
            <!-- student id -->
    
            <!-- student gdpa -->
            <div class="from-control col-md-4">
              <label for="gdpa" class="gp_Label">Student GDPA</label>
              <input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
            </div>
            <!-- student gdpa -->
            <div class="col-md-12">
              <button id="submit" type="submit">Add</button>
              <button id="list" id="list" type="button" onclick="showList()">Show</button>
            </div>
          </form>
        </div>
    
      </div>
      <div id="showli"></div>
    
    
    
      <div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
      <div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>
    
      <script src="./src/main.js"></script>
    </body>
    
    </html>
    Reply
  2. You mean this

    document.getElementById("showLi").innerHTML = students
     .map(({name,id,gdpa}) => `<li>name: ${name}, id: ${id}, gdpa: ${gdpa}</li>`)
     .join("");
    

    ALSO change

    <button id="submit" type="submit">Add</button>
    

    to

    <button id="add" type="button">Add</button>
    

    and change

    document.getElementById("submit").addEventListener("click", (e) => {
    

    to

    document.getElementById("add").addEventListener("click", (e) => {
    
    let students = [];
    let x = 0;
    document.getElementById("add").addEventListener("click", (e) => {
      e.preventDefault();
      let nameInputEl = document.getElementById("name");
      let idInputEl = document.getElementById("idNumber");
      let gdpaInputEl = document.getElementById("gdpa");
    
      // Validation for input
      inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
    
      // insert student
      if (x == 1) {
        insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
      }
    
      // showList(); // uncomment to make you push the show
    });
    
    function inputValidation(name, id, gdpa) {
      // check for the value of each element
    
      if (name == "") {
        document.getElementById("Error101").style.display = "block";
      } else if (id == "") {
        document.getElementById("Error101").style.display = "block";
      } else if (gdpa == "") {
        document.getElementById("Error101").style.display = "block";
      } else {
        document.getElementById("Succes101").style.display = "block";
        x = 1;
      }
      setTimeout(function() {
        document.getElementById("Error101").style.display = "none";
        document.getElementById("Succes101").style.display = "none";
      }, 3000);
    }
    
    function insertStudent(name, id, gdpa) {
      let student = {
        name: name,
        id: id,
        gdpa: gdpa,
      };
      students.push(student);
      console.log("students array: ", students);
      x = 0;
    }
    
    function showList() {
      document.getElementById("showLi").innerHTML = students
        .map(({
          name,
          id,
          gdpa
        }) => `<li>name: ${name}, id: ${id}, gdpa: ${gdpa}</li>`)
        .join("");
    }
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
      <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
      <link rel="stylesheet" href="assets/style.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>School Managment System</title>
    </head>
    
    <body>
      <div class="container">
        <div class="big-title">
          <h2 class="title">Assignment</h2>
          <span class="ligne"> </span>
        </div>
        <div class="big_box col-md-12">
          <form>
            <!-- student name -->
            <div class="from-control col-md-4">
              <label for="name" class="Name_Label">Student Name</label>
              <input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
            </div>
            <!-- student name -->
    
            <!-- student id -->
            <div class="from-control col-md-4">
              <label for="idNumber" class="NO_Label">Student ID</label>
              <input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
            </div>
            <!-- student id -->
    
            <!-- student gdpa -->
            <div class="from-control col-md-4">
              <label for="gdpa" class="gp_Label">Student GDPA</label>
              <input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
            </div>
            <!-- student gdpa -->
            <div class="col-md-12">
              <button id="add" type="button">Add</button>
              <button id="list" id="list" type="button" onclick="showList()">Show</button>
            </div>
          </form>
        </div>
    
      </div>
      <div id="showLi"></div>
    
    
    
      <div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
      <div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>
    
      <script src="./src/main.js"></script>
    </body>
    
    </html>

    Here is YOUR code with ONLY my change and <ol id="ShowLi"></ol>

    let students = [];
    let x = 0;
    document.getElementById("submit").addEventListener("click", (e) => {
      e.preventDefault();
      let nameInputEl = document.getElementById("name");
      let idInputEl = document.getElementById("idNumber");
      let gdpaInputEl = document.getElementById("gdpa");
    
      // Validation for input
      inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
    
      // insert student
      if (x == 1) {
        insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
      }
    
      // Show success message
    });
    
    function inputValidation(name, id, gdpa) {
      // check for the value of each element
    
      if (name == "") {
        document.getElementById("Error101").style.display = "block";
      } else if (id == "") {
        document.getElementById("Error101").style.display = "block";
      } else if (gdpa == "") {
        document.getElementById("Error101").style.display = "block";
      } else {
        document.getElementById("Succes101").style.display = "block";
        x = 1;
      }
      setTimeout(function() {
        document.getElementById("Error101").style.display = "none";
        document.getElementById("Succes101").style.display = "none";
      }, 3000);
    }
    
    function insertStudent(name, id, gdpa) {
      let student = {
        name: name,
        id: id,
        gdpa: gdpa,
      };
      students.push(student);
      console.log("students array: ", students);
      x = 0;
    }
    
    function showList() {
      document.getElementById("ShowLi").innerHTML = students
        .map(({name,id,gdpa}) => `<li>name: ${name}, id: ${id}, gdpa: ${gdpa}</li>`)
        .join("");
    
    }
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
      <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
      <link rel="stylesheet" href="assets/style.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>School Managment System</title>
    </head>
    
    <body>
      <div class="container">
        <div class="big-title">
          <h2 class="title">Assignment</h2>
          <span class="ligne"> </span>
        </div>
        <div class="big_box col-md-12">
          <form>
            <!-- student name -->
            <div class="from-control col-md-4">
              <label for="name" class="Name_Label">Student Name</label>
              <input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
            </div>
            <!-- student name -->
    
            <!-- student id -->
            <div class="from-control col-md-4">
              <label for="idNumber" class="NO_Label">Student ID</label>
              <input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
            </div>
            <!-- student id -->
    
            <!-- student gdpa -->
            <div class="from-control col-md-4">
              <label for="gdpa" class="gp_Label">Student GDPA</label>
              <input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
            </div>
            <!-- student gdpa -->
            <div class="col-md-12">
              <button id="submit" type="submit">Add</button>
              <button id="list" id="list" type="button" onclick="showList()">Show</button>
            </div>
          </form>
        </div>
    
      </div>
      <ol id="ShowLi"></ol>
    
    
    
      <div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
      <div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>
    
      <script src="./src/main.js"></script>
    </body>
    
    </html>
    Reply

Leave a Comment