read external file with Javascript

Question

I have an external textfile of variable length named profiles.txt with information in the following format:

 Jason/Red/Tyrannosaurus
 Zack/Black/Mastodon
 Billy/Blue/Triceratops
 Trini/Yellow/Griffin
 (etc)

How can I read through the file using JavaScript to output the following HTML:

 Name: Jason<br>
 Color: Red<br>
 Avatar: Tyrannosaurus<br>
 <br>
 Name: Zack<br>
 Color: Black<br>
 Avatar: Mastodon<br>
 <br>
 (etc)

javascript on the browser, external file is .txt file located on the same domain as the .html and javascript files — Henry Yun
– Henry Yun, Commented Sep 13, 2011 at 18:12

Joe · Accepted Answer · 2011-09-13 18:03:28Z

6

Here's an example using XMLHttpRequest:

var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open('GET', "test.txt", false);
xmlhttp.send();
document.write(xmlhttp.responseText.split('\r\n').map(function (i) {return i.replace(/(.+),(.+),(.+)/g, 'Name: $1<br>Color: $2<br>Avatar: $3<br>')} ).join('<br/>'));

Array.map needs to be shim in IE8 and below. Also, IE uses new ActiveXObject("Msxml2.XMLHTTP") This is a very slimmed down example. I'm using asyc false which is bad and document.write which is bad. But I just wanted to demonstrate getting the file and parsing the input.

answered Sep 13, 2011 at 18:03

Joe

82.8k18 gold badges130 silver badges147 bronze badges

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

4 Comments

Chris Baker Over a year ago

This code would work to get the contents of a text file that is on the server. Valid code, yes, but I do not believe the file the OP is working with is located on the server - the word "external" in the question leads me to this conclusion.

Joe Over a year ago

@Chris, are you serious? Where is external? If it's not on the server, where is it? I guess, what I'm saying is why downvote me if you have no clue what the OP actually wants. That's cold

Chris Baker Over a year ago

Who knows? I just noted that this code only applies if the file is on the server - is that true, or isn't it? I am not certain what aspect of this statement you find incredible. EDIT: Cool, OP specified that the file is on the server. Good deal. (FYI - no downvotes from me, man)

Chris Baker Over a year ago

No sweat, have a +1 for penetrating the mist of vagary :)

Chris Baker · Accepted Answer · 2011-09-13 18:12:24Z

ONLY APPLIES IF THE FILE IS NOT ALREADY ON THE SERVER (not specified in question)

Without posting the file to the server or pasting the file's contents into a textbox, there is currently no way for javascript to interact directly with the file system.

Also for security reasons, javascript may not, by itself, look at the contents of a file that has been selected using a file-type input.

So, your options are:

Upload the file to the server using AJAX-style form post, return the contents (jQuery plugin for AJAX file uploads)
Submit the file via normal form postback, when the page is reloaded you can pass the contents along to javascript with JSON written to the output
Copy/paste the data into a textarea, use an onKeyUp event to detect entry of data (or add a "Process" button) to read the textarea contents and go from there (sample)

jbabey · Accepted Answer · 2011-09-13 18:09:35Z

0

There is no file I/O in javascript for security reasons. Your best bet is to expose this text file in your server code and make an ajax call for it from the javascript

answered Sep 13, 2011 at 18:09

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

Comments

Dave.Sol · Accepted Answer · 2011-09-13 18:05:21Z

-2

var fileRead = "Jason,Red,Tyrannosaurus\nZack,Black,Mastodon\nBilly,Blue,Triceratops\nTrini,Yellow,Griffin";
var lines = fileRead.split("\n");

for (var i in lines){
    var pdata = lines[i].split(",");
    jQuery("#ResultDiv").append("Name: " + pdata[0] + "<br/>Color: " + pdata[1] + "<br/>Avatar: " + pdata[2] + "<br/><br/>" );
}

answered Sep 13, 2011 at 18:05

Dave.Sol

2511 silver badge6 bronze badges

Collectives™ on Stack Overflow

read external file with Javascript

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related