Прочитать последнюю строку файла CSV и извлечь одну строку - PullRequest
Новая
       8

Прочитать последнюю строку файла CSV и извлечь одну строку

0 голосов
/ 19 ноября 2018

Я пишу программу 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>

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

если я понял ваш вопрос, вы должны поместить:

1) в localhost файл csv (в этом примере test.csv) и файл js в serverweb (пример XAMPP)
2) ваш 4дата массива, data1, data2, dat3 вне функции.
3) я использовал id во всех тегах H1 и вызываю их с 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>

Надеюсь, это поможет

0 голосов
/ 20 ноября 2018

Есть несколько проблем с вашим кодом, которые я решаю в своем коде ниже

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