Создать новую строку в таблице из объекта в массиве

Question

Суть такая, надо впушивать объекты в массив а потом вывести все в таблицу. Пробовал без промисов, но я так понял во вторую функцию просто попадает пустой массив без объектов, а с промисами ничего не работает. Возможно кто то предложит более уместную логику и решение для данной задачи?(в дальнейшем, обьекты можно будет удалять, менять и т.д.). Извиняюсь за глупый вопрос и данный говнокод(новичок).

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <div class="main">

            <header>
                <button class="btn" id="seeButton">Просмотр таблицы</button>
                <button class="btn" id="addButton">Добавить запись</button>
                <button class="btn" id="deleteButton">Удалить запись</button>
                <button class="btn" id="updateButton">Обновить запись</button>
                <button class="btn" id="searcheButton">Поиск записей</button>
                <button class="btn" id="logButton">Просмотреть лог</button>

            </header>

            <div>




<table class="table" id="table_id">
                    <thead>
                        <tr>
                            <th>№</th>
                            <th>Фамилия</th>
                            <th>Должность</th>
                            <th>Год рождения</th>
                            <th>Оклад(грн)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                      
                    </tbody>
                </table>


            </div>


        </div>  

        <script>
            var seeButton = document.getElementById("seeButton");
            var addButton = document.getElementById("addButton");
            var deleteButton = document.getElementById("deleteButton");
            var updateButton = document.getElementById("updateButton");
            var searcheButton = document.getElementById("searcheButton");
            var logButton = document.getElementById("logButton");
            
            addButton.onclick = add;
            

            let arr = [

            ]

            

            var count = 0;

        function add() {  
            return new Promise(function(resolve, reject) {
             count = count + 1;
             let fam = prompt("введите фамилию", "");
             let dol = prompt("введите должность", "");
             let date = prompt("введите год рождения", "");
             let salary = +prompt("введите оклад", "");  
            
             function User(fam, dol, date, salary){
                    this.fam = fam;
                    this.dol = dol;
                    this.date = date;
                    this.salary = salary;
             }

             var user = new User(fam, dol, date, salary)
             arr.push(user)
             console.log(arr)
            });
        }



        add.then(
            function addObj(arr){
                for(i=0; i<=arr.length; i++){
                    var tr = "<tr>";

                    /* Must not forget the $ sign */
                    tr += "<td>"+ i + "</td>" + "<td>" + arr[i].fam + "</td>" + "<td>" + arr[i].dol + "</td>" + "<td>" + arr[i].date + "</td>" + "<td>" + arr[i].salary  + "</td></tr>";

                    tbody.append(tr); // вставить tr в конец <tbody>
                    console.log("работает цикл")
                    }
                    console.log("работает без цикла")
            }    
        )
        </script>
    </body>

Answer 1

var seeButton = document.getElementById("seeButton");
var addButton = document.getElementById("addButton");
var deleteButton = document.getElementById("deleteButton");
var updateButton = document.getElementById("updateButton");
var searcheButton = document.getElementById("searcheButton");
var logButton = document.getElementById("logButton");
var tbody = document.querySelector("#table_id tbody");

let arr = []

addButton.addEventListener('click', () => {
    let user = add();
    addObj(user, arr.length)
});


function add() {  
    let fam = prompt("введите фамилию", "");
    let dol = prompt("введите должность", "");
    let date = prompt("введите год рождения", "");
    let salary = +prompt("введите оклад", "");

    function User(fam, dol, date, salary) {
      this.fam = fam;
      this.dol = dol;
      this.date = date;
      this.salary = salary;
    }

    var user = new User(fam, dol, date, salary)
    arr.push(user)
    
    return user;    
}




function addObj(user, counter) {  
    var tr = `<tr>
<td>${counter}</td><td>${user.fam}</td><td>${user.dol}</td><td>${user.date}</td><td>${user.salary}</td>
</td>`;
    
    tbody.insertAdjacentHTML('beforeend', tr);        
}

<div class="main">
  <header>
    <button class="btn" id="seeButton">Просмотр таблицы</button>
    <button class="btn" id="addButton">Добавить запись</button>
    <button class="btn" id="deleteButton">Удалить запись</button>
    <button class="btn" id="updateButton">Обновить запись</button>
    <button class="btn" id="searcheButton">Поиск записей</button>
    <button class="btn" id="logButton">Просмотреть лог</button>
  </header>

  <div>
    <table class="table" id="table_id">
      <thead>
        <tr>
          <th>№</th>
          <th>Фамилия</th>
          <th>Должность</th>
          <th>Год рождения</th>
          <th>Оклад(грн)</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>

БЛОГ НА HUSL

Создать новую строку в таблице из объекта в массиве

Ответы (1 шт):