Question

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

第一个文件（devices.csv）具有 id，name，units ，其中单位是设备可以连接的端口数。

第二个文件（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"

试试吧＆amp;实施它：

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

现在可以查询数据变量＆amp;看起来像这样：

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

使用Javascript操纵CSV数据

1 个答案: