How to convert csv file to html table?

Question

<!DOCTYPE html>
<html>

<head>
  <title>CSV File to HTML Table Using AJAX jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="table-responsive">
      <h1 align="center">CSV File to HTML Table Using AJAX jQuery</h1>
      <br />
      <div align="center">
        <button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
      </div>
      <br />
      <div id="employee_table">
      </div>
    </div>
  </div>
</body>

</html>

<script>
  $(document).ready(function () {
    $('#load_data').click(function () {
      $.ajax({
        url: "iguana.csv",
        dataType: "text",
        success: function (data) {
          var employee_data = data.split(/\r?\n|\r/);
          var table_data = '<table class="table table-bordered table-striped">';
          for (var count = 0; count < employee_data.length; count++) {
            var cell_data = employee_data[count].split(",");
            table_data += '<tr>';
            for (var cell_count = 0; cell_count < cell_data.length; cell_count++) {
              if (count === 0) {
                table_data += '<th>' + cell_data[cell_count] + '</th>';
              }
              else {
                table_data += '<td>' + cell_data[cell_count] + '</td>';
              }
            }
            table_data += '</tr>';
          }
          table_data += '</table>';
          $('#employee_table').html(table_data);
        }
      });
    });

  });
</script>

while running this code I'm getting the following error:

jquery.min.js:4 Access to XMLHttpRequest at 'file:///C:/Users/rkuchhadia/Music/Dash/database_backup/iguana.csv' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Does this answer your question? [XMLHttpRequest cannot load file. Cross origin requests are only supported for HTTP](https://stackoverflow.com/questions/20041656/xmlhttprequest-cannot-load-file-cross-origin-requests-are-only-supported-for-ht) — Titulum, Jan 17 '20 at 07:38
if we want to load CSV file in ajax then we must need server ?? — Rahul kuchhadia, Jan 17 '20 at 07:39

score 2 · Answer 1 · answered Jan 17 '20 at 07:47

The problem is that you are running the webpage locally, without a webserver. If you want ajax to retrieve files on your computer, you will have to serve them by a webserver.

I would propose that you publish your webpage by using a small express server:

const express = require('express');
const app = express();

app.use(express.static('public')); // where 'public' is the folder containing the files that you want to retrieve.

You can find more information here.

How to convert csv file to html table?

1 Answers1