How to load the data into html table from a text file

Question

I'm trying to display the upload.txt records into a html table.

The upload.txt file is located at this url : http://localhost:3000/upload. When we call this url it will get upload.txt file.

Actually I'm using node.js here.So I'm routing here like this :

app.get('/upload', function(req, res) {
  res.sendfile('views/upload.txt');
});

My upload.txt :

client_ip
1.0.230.145
1.1.145.219
1.1.214.239
1.11.112.100
1.112.218.165
1.112.98.44
1.113.55.77
1.114.193.160
1.115.77.221
1.115.81.190
1.124.150.22
1.124.158.81

My table.html:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color:#FFBD0C;
}


table {
    border-collapse:separate;
    border-spacing:1px;
    background:#CCC;
        margin-right:200px
    }

table th {
        background:#EEE;
        font-weight:600;
        padding:10px 20px;
        text-align:center;
    }

table tbody {
        padding:0; margin:0;
        border-collapse:collapse;
        border-spacing:0px;
    }
table td {
          background:#C7DBED;
          padding:5px 10px;
          text-align:center;
    }


</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
<script>
var userListData = [];

$(document).ready(function() {

    populateTable();

});

function populateTable() {

    var tableContent = '';


    $.get( 'http://localhost:3000/upload', function( data ) {

      alert(data); // Here I'm able to get the entire text file data.
        $.each(data, function(){
           alert(data); // here I'm unable to get the data.
            tableContent += '<tr>';
            tableContent += '<td>' + this.client_ip + '</td>';
            tableContent += '</tr>';
        });


        $('#tablediv').html(tableContent);
    });
};

</script>
</head>
<body>
<h2 style="color:brown; margin-left:490px;margin-top:150px;">Upload Clients</h2>
<table  width="60%" id="tab" style="margin-left:200px;">
  <thead>
  <tr>
    <th>Clients</th>
  </tr>
<thead>
<tbody id="tablediv">
</tbody>
</table>

</body>
</html>

At this point,how can we load the client_ip values into the table.

function populateTable() {

    var tableContent = '';


    $.get( 'http://localhost:3000/upload', function( data ) {

      alert(data);
        $.each(data, function(){
            tableContent += '<tr>';
            tableContent += '<td>' + this.client_ip + '</td>';
            tableContent += '</tr>';
        });


        $('#tablediv').html(tableContent);
    });
};

Actually I'm unable to load the data into a html table.Can anyone please help me out regarding this issue.

LOCAL HOST LINKS WILL NOT WORK ONLINE...Don't post them here! — Nishanth Matha
– Nishanth Matha, Commented Oct 8, 2015 at 4:07
your url says http://localhost:3000/upload in $.get. Shouldn't you be specifying complete url with extension like $.get('http://localhost:3000/upload.txt'...? — Guruprasad J Rao
– Guruprasad J Rao, Commented Oct 8, 2015 at 4:09
Actually I'm using node.js in my code.What I'm trying to say is if suppose the text file is in the server at one url then how to load the text file data into a html table. — dev333
– dev333, Commented Oct 8, 2015 at 4:09
if your upload directory is http://localhost:3000/upload what are you trying to read from http://localhost:3000/uploadcsv in your script — Nishanth Matha
– Nishanth Matha, Commented Oct 8, 2015 at 4:10
Your $.each will not work.. once you get data as response try logging by using console.log(data) in console and see how it is obtained — Guruprasad J Rao
– Guruprasad J Rao, Commented Oct 8, 2015 at 4:11

Nishanth Matha · Accepted Answer · 2015-10-08 23:55:05Z

2

You're not trying to read file line by line try this instead:

function populateTable() {

    var tableContent = '';


    $.get( 'http://localhost:3000/upload', function( data ) {

      alert(data);
      //this will split the string into array line by line
      var lineByline = data.split('\n');
        //here we're itraing the array which you've created and printing the values
        $.each(lineByline , function(key,value){
            tableContent += '<tr>';
            tableContent += '<td>' + value + '</td>';
            tableContent += '</tr>';
        });

        $('#tablediv').html(tableContent);
    });
};

For efficiency you can try loading the file in chunks somthing like:

    //telling your ajax to read only some amount of data
    // you have to use this in recursion to get the entire data 
    // just add this before you call $.get(..)
    $.ajaxSetup({ beforeSend : function(xhr) {
       xhr.setRequestHeader("Range", "bytes=0-2800" );
    }});

edited Oct 8, 2015 at 23:55

answered Oct 8, 2015 at 4:38

Nishanth Matha

6,0892 gold badges22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dev333 Over a year ago

Through this code,I'm able to display a table but rows are filled with numbers starting from Zero.I want to display the client_ip's in the table instead of numbers.

dev333 Over a year ago

Ya,now its working fine.Thanks a lot for ur info.But it is taking time to load the client_ip's .Actually I have nearly 68000 records in the upload.txt file

dev333 Over a year ago

After using the $.ajaxSetup code,I'm able to get the client_ip's only within that range.How to combine all the chunks finally to display all the client_ip's.Can we able to keep a dynamic range instead of using a static range

Nishanth Matha Over a year ago

@GangiguntaDivya use a recursion over that and you should get all the data

dev333 Over a year ago

k fine.Thank u very much.

Arvin · Accepted Answer · 2015-10-08 04:42:22Z

2

First problem seems to be the ajax request is not able to find the resource. The ajax source URL is missing the file extension. i.e. "http://localhost:3000/upload"

Data is obtained. Your implemented alert pops up with the data once you add the file extension. But he problem seems to be with the $.each loop

You can update your populateTable function with the below one

function populateTable() {

    var tableContent = '';

    $.get('http://localhost:3000/upload.txt', function(data) {
       alert(data);
       $('#tablediv').html(data.replace('n',''));
    });
};

edited Oct 8, 2015 at 4:42

answered Oct 8, 2015 at 4:30

Arvin

6146 silver badges15 bronze badges

Comments

Guruprasad J Rao · Accepted Answer · 2015-10-08 04:43:28Z

1

DEMO

I assume you are getting it back as string. Then you need to split the string on based on space character and then loop it and also need to avoid first string which will client_ip

var ips=data.split(' ');
var tableContent;
$.each(ips, function(key,value){
    if(key==0) //do not display client_ip which is first string
        return;
    tableContent += '<tr>';
    tableContent += '<td>' + value + '</td>';
    tableContent += '</tr>';

});
$('table').html(tableContent);

answered Oct 8, 2015 at 4:43

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

Comments

Arvin · Accepted Answer · 2015-10-08 04:54:50Z

1

Some update to my pervious answer

This would handle your requirement to the best

function populateTable() {

    var tableContent = '';


    $.get( 'http://localhost:3000/upload.txt', function( data ) {

      alert(data);
      var lineByline = data.split('\n')
        $.each(lineByline , function(index,value){
            tableContent += '<tr>';
            tableContent += '<td>' + value + '</td>';
            tableContent += '</tr>';
        });


        $('#tablediv').html(tableContent);
    });
};

answered Oct 8, 2015 at 4:54

Arvin

6146 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to load the data into html table from a text file

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related