0

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

3
  • Please post what you have tried so far, and not just the requirement Commented Jan 26, 2016 at 14:51
  • Take a look to this library papaparse.com Commented Jan 26, 2016 at 14:52
  • @loxxy see the edit please Commented Jan 26, 2016 at 15:07

1 Answer 1

1

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": []
  }
}
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.