CODEWITHSUNDEEP
javascriptjqueryhtmlajaxcsv
Lorjv
Lorjv

Reputation: 15

Reading in a specific csv file into html

I'm currently trying to select a specific csv file based on user selection and then display this as a html table in the web page on the click of a button.

The steps that this will need to have are: to select the options from a drop down which will be used to identify the csv file name pass the csv file name to a function which displays this as a html table perform this on the click of a button rather than when the web page loads

Below is the code I have so far, the first part of the code identifies the csv file name. The second part reads in a hard coded csv file and parses it as a html table which is displayed when the web page opens.

<script> 
   function button_clicked(){ 
   var obj_opt = document.getElementById("opt"); 
   var opt = obj_opt.value; 
   if (opt==""){ 
   alert("Please select Option1"); 
   return; 
   } 
   var obj_opt_two = document.getElementById("opt_two"); 
   var opt_two = obj_opt_two.value; 
   if (opt_two==""){ 
   alert("Please select Option2"); 
   return; 
   } 
   var urls= "http://mysite/" + opt + "_" + opt_two + ".csv";  
   alert("The link is: " + urls);
   }
</script> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>

<script>
  function arrayToTable(tableData) {
    var table = $('<table></table>');
    $(tableData).each(function (i, rowData) {
        var row = $('<tr></tr>');
        $(rowData).each(function (j, cellData) {
            row.append($('<td>'+cellData+'</td>'));
        });
        table.append(row);
    });
    return table;
}

$.ajax({
    type: "GET",
    url: "http://mysite/Option1_Option2.csv",
    success: function (data) {
        $('body').append(arrayToTable(Papa.parse(data).data));
    }
});
</script>

<button type="button" onClick="button_clicked()">Load New File</button>

I am unsure how to combine the two javascripts to load the user selected csv as a table via a button, any help on how to do this would be greatly appreciated!

Upvotes: 1

Views: 765

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

To make this work you need to move the $.ajax logic in to the button click handler, and apply the url value to it.

Also note that using on* event attributes in HTML is very outdated and should be avoided where possible. You should use unobtrusive event handlers instead. As you've already included jQuery in the page, you can use that:

$(function() {
  $('#load').click(function() {
    var opt = $("#opt").val();
    if (!opt) {
      alert("Please select Option1");
      return;
    }

    var opt_two = $("#opt_two").val();
    if (!opt_two) {
      alert("Please select Option2");
      return;
    }

    $.ajax({
      type: "GET",
      url: `http://mysite/${opt}_${opt_two}.csv`,
      success: function(data) {
        $('body').append(arrayToTable(Papa.parse(data).data));
      }
    });
  });

  function arrayToTable(tableData) {
    var html = tableData.map(function(row) {
      var rowHtml = '<tr>';
      row.forEach(function(cell) {
        rowHtml += `<td>${cell}</td>`;
      });
      return rowHtml + '</tr>';
    });
    return `<table>${html.join('')}</table>`;
  }
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>

<button type="button" id="load">Load New File</button>

Finally, note that jQuery 1.7 is rather old now. I'd suggest upgrading to 1.12 if you still need to support older IE browsers, or 3.2.1 if not.

Upvotes: 1

user9167318
user9167318

Reputation:

Move the 

$.ajax({
    type: "GET",
    url: "http://mysite/Option1_Option2.csv",
    success: function (data) {
        $('body').append(arrayToTable(Papa.parse(data).data));
    }
});

in the place of

alert("The link is: " + urls);

Upvotes: 0

Related Questions