Загрузка объекта внутри объекта в HTML-таблицу

Question

Поэтому я пытаюсь сделать менеджер файлов в node.js и socket.io, поэтому каждый раз, когда модуль walker обнаруживает файл или папку, он отправляет событие клиенту, который помещает его в таблицу, используя эту большую функцию

    socket.on('loadItem', function(type, name, dateCreated, size, itemPath, parentPath, fileExtension){
        if (type == 'dir'){
            var itemPathID = itemPath.split(' ').join('-');
            var parentPathID = parentPath.split(' ').join('-');
            console.log('parent-path ' + parentPathID)
            document.getElementById('main-table').innerHTML += '<tr><td><i class="fas fa-folder folder"></i></td><td  class="pointer"  onclick="openChildrenContainer(\'' + itemPathID+ '/\')">' + name+ '</td><td>' + dateCreated + '</td><td>' + size + ' bytes</td> </tr>'
            document.getElementById('main-content-div').innerHTML += '<div id="'+itemPathID+'" class="folder-children-container hidden"></div>'
            document.getElementById(itemPathID).innerHTML += table
        }
        if(type == "file"){
            if(fileExtension == 'js'){
            var parentPathID = parentPath.split(' ').join('-');
            console.log(parentPathID)
            document.getElementById('main-table').innerHTML += '<tr><td><i class="fab fa-js-square js-file"></i></td><td><a class="pointer" onclick="openEditor(\'' + itemPath+ '\')">' + name + '</a></td><td>' + dateCreated + '</td><td>' + size + ' bytes</td></tr>'

        }else if(fileExtension == "txt"){
            var parentPathID = parentPath.split(' ').join('-');
            console.log(parentPathID)
            document.getElementById('main-table').innerHTML += '<tr><td><i class="fas fa-file-alt txt-file"></i></td><td><a class="pointer" onclick="openEditor(\'' + itemPath+ '\')">' + name + '</a></td><td>' + dateCreated + '</td><td>' + size + ' bytes</td></tr>'
        }else if(fileExtension == "css"){
            var parentPathID = parentPath.split(' ').join('-');
            console.log(parentPathID)
            document.getElementById('main-table').innerHTML += '<tr><td><i class="fab fa-css3-alt css-file"></i></td><td><a class="pointer" onclick="openEditor(\'' + itemPath+ '\')">' + name + '</a></td><td>' + dateCreated + '</td><td>' + size + ' bytes</td></tr>'
            }
            else{
                var parentPathID = parentPath.split(' ').join('-');
            console.log(parentPathID)
            document.getElementById('main-table').innerHTML += '<tr><td><i class="fa fa-file-text file"></i></td><td><a class="pointer" onclick="openEditor(\'' + itemPath+ '\')">' + name + '</a></td><td>' + dateCreated + '</td><td>' + size + ' bytes</td></tr>'
            }
        }


    })

но если у меня есть много файлов, это приведет к сбою браузера, отправляющего все эти данные индивидуально через веб-сокеты, это плохо, я думаю:(так что теперь я создаю такой объект на стороне сервера

         dirItems[itemPath] = {
            item:{
                name:itemName,
                type:'dir',
                birtDate:stat.birthtime,
                itemSize:stat.size,
                itemPath:itemPath,
                parentPath:parentPath,
                itemExtension:'null'

            }
          }

и затем я отправляю его на страницу клиента, но моя проблема в том, что я не знаю, как поместить это в мою таблицу, это не что-то вроде foreach для этого, я не думаю, что пытался использовать это без су

var cols = ['type', 'name', 'date', 'size'];

    for (var i = 0; i < dirItems.item.length; i++) {
    console.log("moo")
$('#main-table').append('<tr></tr>');

for (var j = 0; j < cols.length; j++) {
    $('#main-table tr:last-child').append('<td>' + dirItems[i][cols[j]] + '</td>');
}
}

какие-нибудь указатели?

Answer 1

Вот как ты делаешь for петли в ES6. Идея состоит в том, чтобы иметь вашу таблицу в качестве шаблона HTML, а затем добавить результаты цикла for как <tr></tr> в пределах <tbody>,

var A = [
          {type:'dinosaur',name:'Rex',date:'1 Jan -00',size:'massive'},
          {type:'dog',name:'Woof',date:'12 Jan 2015',size:'impressive'},
          {type:'parrot',name:'Parry',date:'13 Mar 2018',size:'fistsize'}
          ];
for(animal of A) {
  $('#sometable tbody').append('<tr><td>'+animal.type+'</td><td>'+animal.name+'</td><td>'+animal.date+'</td><td>'+animal.size+'</td></tr>');
}

#sometable {
  border:1px solid black;
}
#sometable td {
  padding:0.2em 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="whatever_div">
  <table id="sometable">
  <thead>
    <tr>
      <th>Type</th>
      <th>Name</th>
      <th>Date</th>
      <th>Size</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

Если вам нравится стиль старой школы, то ваш for Заявление будет выглядеть так:

for(var i=0;i<A.length;i++) {
  var animal = A[i];
  $('#sometable tbody').append('<tr><td>'+animal.type+'</td><td>'+animal.name+'</td><td>'+animal.date+'</td><td>'+animal.size+'</td></tr>');  
}