Как с масива обьектов даные переставить в талицу?

Question

[parsifaly]

Как сделать чтобы вместо 'login' был в этом столпце ключ login и так само с email и password?

addUser = () => {
    arr.push({
      login: login.value,
      email: password.value,
      password: email.value,
    });
    console.log(arr);
    login.value = "";
    email.value = "";
    password.value = "";
  };
  addUser();

  renger = () => {
    let table = "";

    table += '<table  width="100%" >';

    for (let i = 1; i <= 6; i++) {
      table += "<tr >";
      table += "<td height='30px'>" + "<hr/>" + i + "</td>";
      table += "<td height='30px'>" + "<hr/>" + 'login' + "</td>";
      table += "<td height='30px'>" + "<hr/>" + "email" + "</td>";
      table += "<td height='30px'>" + "<hr/>" + "password" + "</td>";
      table += "<td height='30px'>" + "<hr/>" + "Edit" + "</td>";
      table += "<td height='30px'>" + "<hr/>" + "Delet" + "</td>";
      table += "</tr>";
    }
    table += "</table>";
    tableContainer.innerHTML = table;
  };
  renger();

Answer 1

[G F]

Использовать переменные а не строки

Comments

[parsifaly]

можно пример?

[G F]

table += "<td height='30px'>" + "<hr/>" + i + "</td>";

Здесь i переменная. Точно так же только с login

[parsifaly]

G F, когда я написал login ,то оно пишет
[object HTMLInputElement]

Answer 2

[DromHour]

addUser = () => {
    arr.push({
      login: login.value,
      email: password.value,
      password: email.value,
    });
    console.log(arr);
    login.value = "";
    email.value = "";
    password.value = "";
  };
  addUser();

  renger = () => {
    let table = "";

    table += '<table  width="100%" >';

    for (let i = 1; i <= arr.length; i++) {
      const entry = arr[i];
      table += "<tr >";
      table += "<td height='30px'>" + "<hr/>" + i + "</td>";
      table += "<td height='30px'>" + "<hr/>" + entry['login'] + "</td>";
      table += "<td height='30px'>" + "<hr/>" + entry['email'] + "</td>";
      table += "<td height='30px'>" + "<hr/>" + entry['password'] + "</td>";
      table += "<td height='30px'>" + "<hr/>" + "Edit" + "</td>";
      table += "<td height='30px'>" + "<hr/>" + "Delete" + "</td>";
      table += "</tr>";
    }
    table += "</table>";
    tableContainer.innerHTML = table;
  };
  renger();

Кстати, замените renger на render)

Comments

[parsifaly]

Так оно же не работает