CODEWITHSUNDEEP
javascriptjqueryhtml
katie hudson
katie hudson

Reputation: 2893

Load CSV data into HTML and step through rows

I have a CSV file which is always in the following format

COL A   |   COL B        |  COL C      |
---------------------------------------
Email   |   First Name   |   Last Name |

So on each row, column A contains the email, column B the first name and column C the last name.

What I am attempting to do is read this CSV file and inject some of the data within a modal I am displaying. At the moment I have come up with the following

$(function () {
    $("#preview-btn").bind("click", function () {
        var regex = /^([a-zA-Z0-9\s\S_\\.\-:])+(.csv|.txt)$/;
        if (regex.test($("#fileOne").val().toLowerCase())) {
            if (typeof (FileReader) != "undefined") {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var rows = e.target.result.split("\n");
                    for (var i = 0; i < 1; i++) {
                        var cells = rows[i].split(",");
                        $('#myModal .modal-body').load('./emailTemplate.html', function(){
                            $(this).find("#fName").append(cells[1]);
                            $(this).find("#lName").append(cells[2]);
                        });
                    }

                    $('#myModal').modal('show');
                };
                reader.readAsText($("#fileOne")[0].files[0]);
            } else {
                alert("This browser does not support HTML5.");
            }
        } else {
            alert("Please upload a valid CSV file.");
        }
    });
});

So the function splits the rows within the CSV, loads a HTML template, and injects the first name and last name into the html for row 1.

So the above works fine. The problem I am having is that within my model I have the following buttons

<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>

What I am trying to do is if Next is clicked, to display the data from the next row, opposite for the Prev button. I am having issues integrating these 2 button events with the above.

With what I currently have in place, how can I step through the rows within the CSV?

Thanks

Upvotes: 1

Views: 535

Answers (2)

Marcus
Marcus

Reputation: 1930

If i understand you code right, you only load the first row

for (var i = 0; i < 1; i++) { ... }

Just load all rows this way and insert them into a table. With CSS you hide all rows of this table by default. When loading is done set a global variable var i=1. Add a function:

function updateRows(){
  $('#tableId tr').hide()`;
  $('#tableId tr:nth-child(i)').show()`;
}

And you buttons manipulate the i and then call updateRows()

Upvotes: 1

Mosh Feu
Mosh Feu

Reputation: 29287

Here is a pseudo simple of how to manage the next/prev buttons.

The key is to declare a pointer for the current row. So when user clicks next the pointer will "move" to next (e.g. 0 to 1 etc.) than call the function which parse the row and display it.

If something is not clear, let me know.

var current = 0;
var rows = $('textarea').val().split('\n');
console.log(rows);

function applyRow() {
  console.log(rows[current]);
  var cells = rows[current].split(",");
  $("#fName").html(cells[0]);
  $("#lName").html(cells[1]);
}
applyRow();

$('.btn-next').click(function(){
  current++;
  applyRow();
});

$('.btn-prev').click(function(){
  current--;
  applyRow();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
  john,doe
  john1,doe1
  john2,doe2
</textarea>
<table>
  <tr>
    <td id="fName"></td>
    <td id="lName"></td>
  </tr>
</table>
<hr />
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>

Upvotes: 1

Related Questions