loading object thats inside of an object into a html table

so i am trying to make a file manger in node.js and socket.io so every time the walker module detects a file or folder it emits an event to the client that puts it in the table using this large function

    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>'
            }
        }


    })

but if i have alot of file it will crash the browser sending all of that data individualy through websockets is bad i guess :( so now i construct a object like this on server side

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

            }
          }

and i then send it over to the client page but what my problem is is that i don't know how to put this in my table there isnt like a foreach thing for this i dont think i have tried using this with no su

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>');
}
}

any pointers?

This is how you do the for loops in ES6. The idea is to have your table as the HTML template and then append the results of the for loop as <tr></tr> within the <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>

If you fancy the old-school way of doing things, then your for statement will look like:

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>');  
}