javascript - 使用 Javascript 操作 CSV 数据

Question

我有两个 .csv 文件，我需要在简单 html 页面中为这两个文件创建一个表格。

第一个文件 (devices.csv) 具有 id、名称、单位，其中单位表示设备可以连接的端口数。

第二个文件 (connections.csv) 具有第一个文件的引用 ID 以及每个设备中连接的unit_number。

现在，最终结果应该读取文本文件并以允许用户检查每个设备中有多少个单元以及哪些单元已连接或空闲的方式显示信息。

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

我的js文件:

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

请帮忙

Answer 1

在将其全部推送到 DOM(或 HTML)之前，您应该将两个来源的数据转换为一个。例如，每个设备应表示为:“name”、“units”、“unit_numbers”

让我们尝试并实现它:

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

数据变量现在是可查询的，如下所示:

{
  "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": []
  }
}