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)

• David Wolever: Where is the JavaScript running? From the browser?
• Henry Yun: javascript on the browser, external file is .txt file located on the same domain as the .html and javascript files

Answer 1

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.

• Chris Baker: 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: @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: 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: No sweat, have a +1 for penetrating the mist of vagary :)

Answer 2

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)

Answer 3

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

Answer 4

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/>" );
}