将对象内部的对象加载到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>'
            }
        }


    })

但是如果我有很多文件，它会导致浏览器崩溃，通过 websockets 单独发送所有这些数据我猜是不好的 :( 所以现在我在服务器端构造一个这样的对象

         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

这就是在 ES6 中执行 for 循环的方式。我们的想法是将您的表格作为 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>');  
}