CykaBlast-Frontend/readcsv.html at master · RudrakshK/CykaBlast-Frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
 <title>js-tutorials.com : Reading CSV file using jQuery </title>
</head>
<body>
 <div class="container" style="padding:10px 10px;">
   <h1>Demo : Reading CSV file using jQuery</h1>
   <div id="header"></div>
   <div class="well">
       <div class="row" id="csv-display" style="height:500px;overflow: scroll;">
       </div>
   </div>
   <div class="col-sm-10" style="margin:20px 0px 20px 0px;">
       <a class="btn btn-default read-more" style="background:#3399ff;color:white" href="https://www.js-tutorials.com/javascript-tutorial/reading-csv-file-using-jquery/">Back to Tutorial</a>
   </div>
   <div id="footer"></div>
 </div>
</body>
</html>
<script type="text/javascript">
 $(document).ready(function(){
   $('#header').load('../header-ads.html');
   $('#footer').load('../footer-ads.html');

   var data;
   $.ajax({
     type: "GET",
     url: "http://localhost:5500/potholes.csv.html",
     dataType: "text",
     success: function(response)
     {
       data = $.csv.toArrays(response);
       generateHtmlTable(data);
     }
   });

   function generateHtmlTable(data) {
       var html = '<table  class="table table-condensed table-hover table-striped">';

     if(typeof(data[0]) === 'undefined') {
       return null;
     } else {
       $.each(data, function( index, row ) {
         //bind header
         if(index == 0) {
           html += '<thead>';
           html += '<tr>';
           $.each(row, function( index, colData ) {
               html += '<th>';
               html += colData;
               html += '</th>';
           });
           html += '</tr>';
           html += '</thead>';
           html += '<tbody>';
         } else {
           html += '<tr>';
           $.each(row, function( index, colData ) {
               html += '<td>';
               html += colData;
               html += '</td>';
           });
           html += '</tr>';
         }
       });
       html += '</tbody>';
       html += '</table>';

       $('#csv-display').append(html);
     }
   }
 });
</script>