时间戳

首页 > 解决方案 > 读取 CSV 文件的最后一行并提取一行

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

问题描述

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

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

我发现其他代码可以从最后一行读取一个值... 读取 CSV 文件的最后一行并提取一个值

我可以从该代码中删除它吗：

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>

标签： javascripteof

解决方案

您的代码存在一些问题，我在下面的代码中解决了这些问题

  1. 您的评论seperated values被视为代码。
  2. 如果 CSV 中只有 1 行，您当前的代码将不起作用
  3. 您对标签的中间字符串使用<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);
    });
  }
})

推荐阅读