Read the last line of a CSV file and extract one row

I am writing a javascpript program to read data from a CSV file and place it in variables, to ultimately be displayed in HTML. This file will be appended to at the end of the file by another program. I would like to read in the last line only.

Example data:
Date, Data1, Data2, Data3

I have found other code to read in one value from the last line... Read the last line of a CSV file and extract one value

Can I just remove this from that code:

var fields = lastLine.split(',');

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

Thanks!

Here is a code example of what I was going to use:

<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>

edited Nov 19 '18 at 20:59

asked Nov 19 '18 at 17:27

mountbaldy

134

Did that work? Do you have a full example of what you have implemented?

– Rastalamm
Nov 19 '18 at 17:36

I have not tried that yet.

– mountbaldy
Nov 19 '18 at 17:51

3

Usually the way Stack Overflow works is you try to do something, then you ask when there's a Minimal, Complete, and Verifiable example that you can't work past on your own. Right now you have hypothetical code and a hypothetical problem, there's not much to answer until you actually implement something tangible and try it.

– Patrick Roberts
Nov 19 '18 at 17:58

Thank you for the clarification. I apologize! I'll work on this further and post an update when I have something better you can work from.

– mountbaldy
Nov 19 '18 at 18:05

Have you tried this? What's not working?

– Jim B.
Nov 19 '18 at 18:26

|
show 1 more comment

Example data:
Date, Data1, Data2, Data3

I have found other code to read in one value from the last line... Read the last line of a CSV file and extract one value

Can I just remove this from that code:

var fields = lastLine.split(',');

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

Thanks!

Here is a code example of what I was going to use:

<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>

edited Nov 19 '18 at 20:59

asked Nov 19 '18 at 17:27

mountbaldy

134

Did that work? Do you have a full example of what you have implemented?

– Rastalamm
Nov 19 '18 at 17:36

I have not tried that yet.

– mountbaldy
Nov 19 '18 at 17:51

3

Usually the way Stack Overflow works is you try to do something, then you ask when there's a Minimal, Complete, and Verifiable example that you can't work past on your own. Right now you have hypothetical code and a hypothetical problem, there's not much to answer until you actually implement something tangible and try it.

– Patrick Roberts
Nov 19 '18 at 17:58

Thank you for the clarification. I apologize! I'll work on this further and post an update when I have something better you can work from.

– mountbaldy
Nov 19 '18 at 18:05

Have you tried this? What's not working?

– Jim B.
Nov 19 '18 at 18:26

|
show 1 more comment

Example data:
Date, Data1, Data2, Data3

I have found other code to read in one value from the last line... Read the last line of a CSV file and extract one value

Can I just remove this from that code:

var fields = lastLine.split(',');

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

Thanks!

Here is a code example of what I was going to use:

<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>

edited Nov 19 '18 at 20:59

asked Nov 19 '18 at 17:27

mountbaldy

134

Example data:
Date, Data1, Data2, Data3

I have found other code to read in one value from the last line... Read the last line of a CSV file and extract one value

Can I just remove this from that code:

var fields = lastLine.split(',');

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

Thanks!

Here is a code example of what I was going to use:

<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>

javascript eof

edited Nov 19 '18 at 20:59

asked Nov 19 '18 at 17:27

mountbaldy

134

edited Nov 19 '18 at 20:59

asked Nov 19 '18 at 17:27

mountbaldy

134

edited Nov 19 '18 at 20:59

asked Nov 19 '18 at 17:27

mountbaldy

134

asked Nov 19 '18 at 17:27

mountbaldy

134

asked Nov 19 '18 at 17:27

mountbaldy

134

Did that work? Do you have a full example of what you have implemented?

– Rastalamm
Nov 19 '18 at 17:36

I have not tried that yet.

– mountbaldy
Nov 19 '18 at 17:51

3

Usually the way Stack Overflow works is you try to do something, then you ask when there's a Minimal, Complete, and Verifiable example that you can't work past on your own. Right now you have hypothetical code and a hypothetical problem, there's not much to answer until you actually implement something tangible and try it.

– Patrick Roberts
Nov 19 '18 at 17:58

Thank you for the clarification. I apologize! I'll work on this further and post an update when I have something better you can work from.

– mountbaldy
Nov 19 '18 at 18:05

Have you tried this? What's not working?

– Jim B.
Nov 19 '18 at 18:26

|
show 1 more comment

Did that work? Do you have a full example of what you have implemented?

– Rastalamm
Nov 19 '18 at 17:36

I have not tried that yet.

– mountbaldy
Nov 19 '18 at 17:51

3

Usually the way Stack Overflow works is you try to do something, then you ask when there's a Minimal, Complete, and Verifiable example that you can't work past on your own. Right now you have hypothetical code and a hypothetical problem, there's not much to answer until you actually implement something tangible and try it.

– Patrick Roberts
Nov 19 '18 at 17:58

Thank you for the clarification. I apologize! I'll work on this further and post an update when I have something better you can work from.

– mountbaldy
Nov 19 '18 at 18:05

Have you tried this? What's not working?

– Jim B.
Nov 19 '18 at 18:26

Did that work? Do you have a full example of what you have implemented?

– Rastalamm
Nov 19 '18 at 17:36

I have not tried that yet.

– mountbaldy
Nov 19 '18 at 17:51

Usually the way Stack Overflow works is you try to do something, then you ask when there's a Minimal, Complete, and Verifiable example that you can't work past on your own. Right now you have hypothetical code and a hypothetical problem, there's not much to answer until you actually implement something tangible and try it.

– Patrick Roberts
Nov 19 '18 at 17:58

Thank you for the clarification. I apologize! I'll work on this further and post an update when I have something better you can work from.

– mountbaldy
Nov 19 '18 at 18:05

Have you tried this? What's not working?

– Jim B.
Nov 19 '18 at 18:26

|
show 1 more comment

2 Answers
2

active

oldest

votes

if i understood your question you have to put:

1)in localhost the file csv(test.csv in this example) and file js into serverweb (example XAMPP)

2)your 4 array date, data1, data2, dat3 outside the function.

3) i have used id in all H1 tag and call them with document.getElementById...

I tried the code and works. I have not used the parseFloat because i had text data and no numeric then you remember to modify the code...

the code is the follow:

<!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>

Hope this helps

answered Nov 19 '18 at 22:05

Ferdinando

5871415

That works!! I appreciate your efforts! I hope you have a great day. Thank you!

– mountbaldy
Nov 19 '18 at 22:15

Thanks @mountbaldy... you are welcome :)

– Ferdinando
Nov 19 '18 at 22:18

Is there a way to display the values in HTML that does not use the heading tag? I have tried other heading tags but the spacing doesn't fit right. Other than that it's working perfectly.

– mountbaldy
Nov 20 '18 at 17:08

Yes, you can it...for example you can use DIV instead of h1...change the name h1 in DIV...hope this answer tour question...else give me an example...for more style in your web page you can use bootsrap 4...

– Ferdinando
Nov 20 '18 at 17:19

add a comment |

There's a few issues with your code, which I resolve in my code below

your comment seperated values is being read as code.

your current code won't work if there is only 1 line in the CSV

your mid-string usage of <script> tags is a very bad habit.

Solution 1 (in place substitution)

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

      }

    })

  }

})

Solution 2 (build inside 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);

    });

  }

})

answered Nov 19 '18 at 21:51

AnonymousSB

2,184221

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53379802%2fread-the-last-line-of-a-csv-file-and-extract-one-row%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

if i understood your question you have to put:

I tried the code and works. I have not used the parseFloat because i had text data and no numeric then you remember to modify the code...

the code is the follow:

<!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>

Hope this helps

answered Nov 19 '18 at 22:05

Ferdinando

5871415

That works!! I appreciate your efforts! I hope you have a great day. Thank you!

– mountbaldy
Nov 19 '18 at 22:15

Thanks @mountbaldy... you are welcome :)

– Ferdinando
Nov 19 '18 at 22:18

Is there a way to display the values in HTML that does not use the heading tag? I have tried other heading tags but the spacing doesn't fit right. Other than that it's working perfectly.

– mountbaldy
Nov 20 '18 at 17:08

Yes, you can it...for example you can use DIV instead of h1...change the name h1 in DIV...hope this answer tour question...else give me an example...for more style in your web page you can use bootsrap 4...

– Ferdinando
Nov 20 '18 at 17:19

add a comment |

if i understood your question you have to put:

I tried the code and works. I have not used the parseFloat because i had text data and no numeric then you remember to modify the code...

the code is the follow:

<!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>

Hope this helps

answered Nov 19 '18 at 22:05

Ferdinando

5871415

That works!! I appreciate your efforts! I hope you have a great day. Thank you!

– mountbaldy
Nov 19 '18 at 22:15

Thanks @mountbaldy... you are welcome :)

– Ferdinando
Nov 19 '18 at 22:18

Is there a way to display the values in HTML that does not use the heading tag? I have tried other heading tags but the spacing doesn't fit right. Other than that it's working perfectly.

– mountbaldy
Nov 20 '18 at 17:08

Yes, you can it...for example you can use DIV instead of h1...change the name h1 in DIV...hope this answer tour question...else give me an example...for more style in your web page you can use bootsrap 4...

– Ferdinando
Nov 20 '18 at 17:19

add a comment |

if i understood your question you have to put:

I tried the code and works. I have not used the parseFloat because i had text data and no numeric then you remember to modify the code...

the code is the follow:

<!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>

Hope this helps

answered Nov 19 '18 at 22:05

Ferdinando

5871415

if i understood your question you have to put:

I tried the code and works. I have not used the parseFloat because i had text data and no numeric then you remember to modify the code...

the code is the follow:

<!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>

Hope this helps

answered Nov 19 '18 at 22:05

Ferdinando

5871415

answered Nov 19 '18 at 22:05

Ferdinando

5871415

answered Nov 19 '18 at 22:05

Ferdinando

5871415

answered Nov 19 '18 at 22:05

Ferdinando

5871415

That works!! I appreciate your efforts! I hope you have a great day. Thank you!

– mountbaldy
Nov 19 '18 at 22:15

Thanks @mountbaldy... you are welcome :)

– Ferdinando
Nov 19 '18 at 22:18

Is there a way to display the values in HTML that does not use the heading tag? I have tried other heading tags but the spacing doesn't fit right. Other than that it's working perfectly.

– mountbaldy
Nov 20 '18 at 17:08

Yes, you can it...for example you can use DIV instead of h1...change the name h1 in DIV...hope this answer tour question...else give me an example...for more style in your web page you can use bootsrap 4...

– Ferdinando
Nov 20 '18 at 17:19

add a comment |

That works!! I appreciate your efforts! I hope you have a great day. Thank you!

– mountbaldy
Nov 19 '18 at 22:15

Thanks @mountbaldy... you are welcome :)

– Ferdinando
Nov 19 '18 at 22:18

Is there a way to display the values in HTML that does not use the heading tag? I have tried other heading tags but the spacing doesn't fit right. Other than that it's working perfectly.

– mountbaldy
Nov 20 '18 at 17:08

Yes, you can it...for example you can use DIV instead of h1...change the name h1 in DIV...hope this answer tour question...else give me an example...for more style in your web page you can use bootsrap 4...

– Ferdinando
Nov 20 '18 at 17:19

That works!! I appreciate your efforts! I hope you have a great day. Thank you!

– mountbaldy
Nov 19 '18 at 22:15

Thanks @mountbaldy... you are welcome :)

– Ferdinando
Nov 19 '18 at 22:18

Is there a way to display the values in HTML that does not use the heading tag? I have tried other heading tags but the spacing doesn't fit right. Other than that it's working perfectly.

– mountbaldy
Nov 20 '18 at 17:08

Yes, you can it...for example you can use DIV instead of h1...change the name h1 in DIV...hope this answer tour question...else give me an example...for more style in your web page you can use bootsrap 4...

– Ferdinando
Nov 20 '18 at 17:19

add a comment |

There's a few issues with your code, which I resolve in my code below

your comment seperated values is being read as code.

your current code won't work if there is only 1 line in the CSV

your mid-string usage of <script> tags is a very bad habit.

Solution 1 (in place substitution)

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

      }

    })

  }

})

Solution 2 (build inside 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);

    });

  }

})

answered Nov 19 '18 at 21:51

AnonymousSB

2,184221

add a comment |

There's a few issues with your code, which I resolve in my code below

your comment seperated values is being read as code.

your current code won't work if there is only 1 line in the CSV

your mid-string usage of <script> tags is a very bad habit.

Solution 1 (in place substitution)

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

      }

    })

  }

})

Solution 2 (build inside 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);

    });

  }

})

answered Nov 19 '18 at 21:51

AnonymousSB

2,184221

add a comment |

There's a few issues with your code, which I resolve in my code below

your comment seperated values is being read as code.

your current code won't work if there is only 1 line in the CSV

your mid-string usage of <script> tags is a very bad habit.

Solution 1 (in place substitution)

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

      }

    })

  }

})

Solution 2 (build inside 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);

    });

  }

})

answered Nov 19 '18 at 21:51

AnonymousSB

2,184221

There's a few issues with your code, which I resolve in my code below

your comment seperated values is being read as code.

your current code won't work if there is only 1 line in the CSV

your mid-string usage of <script> tags is a very bad habit.

Solution 1 (in place substitution)

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

      }

    })

  }

})

Solution 2 (build inside 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);

    });

  }

})

answered Nov 19 '18 at 21:51

AnonymousSB

2,184221

answered Nov 19 '18 at 21:51

AnonymousSB

2,184221

answered Nov 19 '18 at 21:51

AnonymousSB

2,184221

answered Nov 19 '18 at 21:51

AnonymousSB

2,184221

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Read the last line of a CSV file and extract one row

2 Answers 2

Solution 1 (in place substitution)

HTML

JavaScript

Solution 2 (build inside JavaScript)

HTML

JavaScript

Your Answer

Sign up or log in

Post as a guest

Post as a guest

2 Answers 2

2 Answers 2

Solution 1 (in place substitution)

HTML

JavaScript

Solution 2 (build inside JavaScript)

HTML

JavaScript

Solution 1 (in place substitution)

HTML

JavaScript

Solution 2 (build inside JavaScript)

HTML

JavaScript

Solution 1 (in place substitution)

HTML

JavaScript

Solution 2 (build inside JavaScript)

HTML

JavaScript

Solution 1 (in place substitution)

HTML

JavaScript

Solution 2 (build inside JavaScript)

HTML

JavaScript

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Biblatex bibliography style without URLs when DOI exists (in Overleaf with Zotero bibliography)

ComboBox Display Member on multiple fields

Is it possible to collect Nectar points via Trainline?

2 Answers
2

2 Answers
2

2 Answers
2