解决方案1（就地替换）

Question

我正在编写一个javascpript程序，以从CSV文件读取数据并将其放在变量中，最终以HTML形式显示。该文件将由另一个程序附加到文件末尾。我只想读最后一行。

示例数据：日期，数据1，数据2，数据3

我发现其他代码可以从最后一行读取一个值... Read the last line of a CSV file and extract one value

我可以从代码中删除它吗？

var fields = lastLine.split(',');
var audioFile = fields.slice(-1)[0].replace('file:\\\\', '')

谢谢！

这是我要使用的代码示例：

<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
 // AJAX in the data file
    $.ajax({
        type: "GET",
        url: "file:///home/tech/Desktop/Test/data.csv",
        dataType: "text",
        success: function(data) {processData(data);}
        });

    // Let's process the data from the data file
    function processData(data) {
        var lines = data.trim().split('\n');
        var lastLine = lines.slice(-1)[0];

        //Set up the data arrays
        var date = [];
        var data1 = [];  
        var data2 = [];
        var data3 = [];


        for (var j=1; j<lines.length; j++) {
        var values = lines[j].split(','); // Split up the comma 
        seperated values
           // We read the key,1st, 2nd and 3rd rows 
           date.push(values[0]); // Read in as string
           // Recommended to read in as float, since we'll be doing 
           some operations on this later.
           data1.push(parseFloat(values[1])); 
           data2.push(parseFloat(values[2]));
           data3.push(parseFloat(values[3]));



        }
    }
})
</script>
</head>
<p>
<H1> This is the 
      <script type="text/javascript"> document.write(date()); 
</script> Date. </H1> <br>
<H1> This is the 
    <script type="text/javascript"> document.write(data1()); 
</script> Data1. </H1> <br>
<H1> This is the
    <script type="text/javascript"> document.write(data2()); 
</script> Data2. </H1> <br>
<H1> This is the
    <script type="text/javascript"> document.write(data3()); 
</script> Data3. </H1> <br>
</p>
</html>

Answer 1

您的代码有一些问题，请在下面的代码中解决

您的评论seperated values被读为代码。
如果CSV中只有1行，则您当前的代码将无效
您在<script>标签的中间字符串用法是一个非常不好的习惯。

解决方案1（就地替换）

HTML

<section>
  <h1>This is the <span id="output0"></span> Date.</h1>
  <h1>This is the <span id="output1"></span> Data 1.</h1>
  <h1>This is the <span id="output2"></span> Data 2.</h1>
  <h1>This is the <span id="output3"></span> Data 3.</h1>
</section>

JavaScript

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "data.csv",
    dataType: "text",
    success: function(data) {processData(data)}
  });

  function processData(data) {
    var lines = data.trim().split('\n');
    var lastLine = lines[lines.length - 1].split(',');

    lastLine.forEach(function(value, i) {
      var outputTarget = document.getElementById(`output${i}`);

      if (outputTarget) {
        outputTarget.innerHTML = value
      }
    })
  }
})

解决方案2（在JavaScript中内置）

HTML

<section id="output"></section>

JavaScript

$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "data.csv",
    dataType: "text",
    success: function(data) {processData(data)}
  });

  function processData(data) {
    var lines = data.trim().split('\n');
    var lastLine = lines[lines.length - 1].split(',');
    var outputTarget = document.getElementById('output')

    lastLine.forEach(function(value, i) {
      var h1 = document.createElement('h1');

      switch(i) {
        case 0:
          h1.innerHTML = `This is the ${value} Date.`;
          break;
        default:
          h1.innerHTML = `This is the ${value} Data ${i}`
      }

      outputTarget.appendChild(h1);
    });
  }
})

Answer 2

如果我理解您的问题，您必须提出：

1）在本地主机中将文件csv（在此示例中为test.csv）和文件js导入serverweb（示例XAMPP）
2）函数外部的4个数组日期，data1，data2，dat3。
3）我在所有H1标签中都使用了id，并使用document.getElementById ...

对其进行了调用

我尝试了代码并工作。我没有使用过parseFloat，因为我有文本数据，没有数字，所以您记得修改代码...

代码如下：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

//Set up the data arrays here
        var date = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];

$(document).ready(function() {
 // AJAX in the data file
    $.ajax({
        type: "GET",
        //url: "file:///home/tech/Desktop/Test/test.csv",
        url: "test.csv",
        dataType: "text",
        success: function(data) {processData(data);}
        });

    // Let's process the data from the data file
    function processData(data) {
        var lines = data.trim().split('\n');
        var lastLine = lines.slice(-1)[0];
    /*
        //Set up the data arrays
        var date = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];
    */

        for (var j=1; j<lines.length; j++) {
        var values = lines[j].split(','); // Split up the comma
        //seperated values
           // We read the key,1st, 2nd and 3rd rows
           date.push(values[0]); // Read in as string

           // Recommended to read in as float, since we'll be doing
           //some operations on this later.
           data1.push(values[1]);
           data2.push(values[2]);
           data3.push(values[3]);
        }
    //added code
    document.getElementById("date").innerHTML="This is the Date. " + date[date.length-1];
    document.getElementById("data1").innerHTML="This is the Data1. " + data1[data1.length-1];
    document.getElementById("data2").innerHTML="This is the Data2. " + data2[data2.length-1];
    document.getElementById("data3").innerHTML="This is the Data3. " + data3[data3.length-1];
    }
})
</script>
</head>
<p>
<H1 id="date"> 
      <script type="text/javascript"> 
</script>  </H1> <br>
<H1 id="data1"> 
    <script type="text/javascript"> 
</script> . </H1> <br>
<H1 id="data2"> 
    <script type="text/javascript"> 
</script> </H1> <br>
<H1 id="data3"> 
    <script type="text/javascript"> 
</script></H1> <br>
</p>
</html>

希望这会有所帮助

读取CSV文件的最后一行并提取一行

2 个答案:

解决方案1（就地替换）

HTML

JavaScript

解决方案2（在JavaScript中内置）

HTML

JavaScript