Q:

Manipulating CSV Data with Javascript

I have two .csv files and i need to make one table for both files in simple html page.
First file (devices.csv) has id,name,units where units the number of ports that device can connect.
Second file (connections.csv) has reference id for the first file and unit_number that is connected in each device.
Now the final result should read the text files and display the information in a way that will allow the user to check how many units are within each devices and which units are connected or free.
devices.csv
id,name,units
1,CAB-01,20
2,CAB-02,10
3,DP-01,4
4,DP-02,12
5,CAB-01,0
6,DP-01,24

connections.csv
device_id,unit_number
1,1
1,3,
1,17
1,18
1,19
7,1
1,20
2,10
3,1
3,2
1,5
4,12
4,1
1,6
2,1
1,7
3,4
1,8
1,9
4,11
4,1
4,3
1,10
2,2
2,3
2,4
3,3
1,12
1,14
4,4
1,15
1,16
2,6
2,8
5,1

my js file :
function handleFiles(files) {
// Check for the various File API support.
var data = new Object;
if (window.FileReader) {
 var j = 0, k = files.length;
 for (var i = 0; i < k; i++) {
             //j++;
             getAsText(files[i]);          
     };
 }
    // FileReader are supported.
//} 
 else {
    alert('FileReader are not supported in this browser.');
}}   

function getAsText(fileToRead) {
var reader = new FileReader();

reader.onload = loadHandler;
reader.onerror = errorHandler;

reader.readAsText(fileToRead);
}

function loadHandler(event) {
var csv = event.target.result;
processData(csv);             
}

function processData(csv) {
var allTextLines = csv.split(/\r\n|\n/);
var lines = [];
while (allTextLines.length) {
    lines.push(allTextLines.shift().split(','));
}
console.log(lines);
drawOutput(lines);
}

function errorHandler(evt) {
if(evt.target.error.name == "NotReadableError") {
    alert("Canno't read file !");
}
}

function drawOutput(lines){
var table = document.createElement("table");

for (var i = 0; i < lines.length; i++) {
    var row = table.insertRow(-1);
    for (var j = 0; j < lines[i].length; j++) {
                var firstNameCell = row.insertCell(-1);
                firstNameCell.appendChild(document.createTextNode(lines[i][j]));
                console.log(firstNameCell); 
    };          
}
document.getElementById("output").appendChild(table);
}

please help

A:

Before pushing it all into DOM (or HTML) you should convert the data from the two sources into one. Say, each device should be represented as: "name", "units", "unit_numbers" 
Let's try & implement it:
var data_devices = ["1,CAB-01,20", "2,CAB-02,10", "3,DP-01,4", "4,DP-02,12", "5,CAB-01,0", "6,DP-01,24"];

var data_connections = ["1,1", "1,3,", "1,17", "1,18", "1,19", "7,1", "1,20", "2,10", "3,1", "3,2", "1,5", "4,12", "4,1", "1,6", "2,1", "1,7", "3,4", "1,8", "1,9", "4,11", "4,1", "4,3", "1,10", "2,2", "2,3", "2,4", "3,3", "1,12", "1,14", "4,4", "1,15", "1,16", "2,6", "2,8", "5,1"];

var data = {};

data_devices.forEach(function(d) { 
    d = d.split(","); 
    data[d[0]] = { "name":d[1], "units":d[2], "unit_numbers":[] }; 
});

data_connections.forEach(function(d) { 
    d = d.split(","); 
    if(data[d[0]]) data[d[0]].unit_numbers.push(d[1]); 
});

The data variable is now queryable & looks like this:
{
  "1": {
    "name": "CAB-01",
    "units": "20",
    "unit_numbers": [
      "1",
      "3",
      "17",
      "18",
      "19",
      "20",
      "5",
      "6",
      "7",
      "8",
      "9",
      "10",
      "12",
      "14",
      "15",
      "16"
    ]
  },
  "2": {
    "name": "CAB-02",
    "units": "10",
    "unit_numbers": [
      "10",
      "1",
      "2",
      "3",
      "4",
      "6",
      "8"
    ]
  },
  "3": {
    "name": "DP-01",
    "units": "4",
    "unit_numbers": [
      "1",
      "2",
      "4",
      "3"
    ]
  },
  "4": {
    "name": "DP-02",
    "units": "12",
    "unit_numbers": [
      "12",
      "1",
      "11",
      "1",
      "3",
      "4"
    ]
  },
  "5": {
    "name": "CAB-01",
    "units": "0",
    "unit_numbers": [
      "1"
    ]
  },
  "6": {
    "name": "DP-01",
    "units": "24",
    "unit_numbers": []
  }
}

