How can I load the contents of a small text file into a javascript var wo/JQuery?

Question

I'm trying to load a very simple text file (eg: 0 online: or 1 online: Username or 2 online: Username, Username), from a server I control, that changes based on the number of users on a minecraft server, into a javascript var, so that I can eventually load it onto my Pebble and have it more or less live update. (read: no jquery) (also read: I have little to no idea what I'm actually doing, and if there's a better way to do it, lemme know.).

I've done a lot of googling which mostly points me to using JSON and XMLHTTPRequests (edit: XMLHTTPRequests are probably necessary) but they seem overly complex for what I need (which is to take the contents of the text file served up via HTTP, stuff it in a var, and have the Pebble spit it out on the screen.)

How can I, without JQuery, and maybe even without JSON, load the contents of a text file into a javascript var?

Some notes:

The server is eventually going to be accessed via Hamachi, but if I can get it working even locally I'll be pretty thrilled.
Following this answer, I get this result. Ditto for local IP.

If the text file required is located at server, you must need xmlhttprequest to fetch it...You have anything different way to approach? — Rakesh_Kumar, Jan 08 '15 at 12:36
Essentially you would need javascript that does a http request, handles the headers and body, and status codes, and updates your code (even if it's a single var) - why not use jquery? it's a single call. — Dmitry Sadakov, Jan 08 '15 at 12:36
@cDima Pebble doesn't support it, and the final js will run on the Pebble. — ian5v, Jan 08 '15 at 12:40
@Rakesh_Kumar I don't quite follow, sorry. It's likely I'm misunderstanding exactly what and how to use XMLHTTPRequest. I suppose it might be possible to have cron fetch the file via curl and then just use a regular open..... — ian5v, Jan 08 '15 at 12:42

score 2 · Accepted Answer · edited Nov 28 '15 at 19:58

This is very easy to do, just include this wrapper for the XmlHttpRequest at the beginning of your script (it makes it easier to use):

var xhrRequest = function (url, type, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function () {
    callback(this.responseText);
  };
  xhr.open(type, url);
  xhr.send();
};

And then call it like this:

xhrRequest(url, 'GET', function(responseText) { 
  console.log("This is the content you got: " + responseText);
});

If you format your content in JSON it will actually make things easier for you because you will not have to parse the file and you can use JavaScript to parse it for you automatically:

For example if the reply is:

{ onlineCount: 42, usernames: [ "Alice", "Bob", "Charlie", "etc" ] }

Then you can process it like this:

xhrRequest(url, 'GET', 
  function(responseText) {
    // responseText contains a JSON object
    var json = JSON.parse(responseText);

    // Now you can process this as a JavaScript dictionary
    console.log("Number of online players: " + json.onlineCount);
    console.log("First player: " + json.usernames[0]);

    // And send messages to Pebble
    Pebble.sendAppMessage({ 0: json.onlineCount });
  }
);

For a complete example and the C side (on Pebble), you should take a loot at Step 3 of the Pebble Tutorial, it does exactly this with weather data.

I ended up doing something else (MyData on Pebble app store) but it looks like this does answer my question. Thanks. — ian5v, Jan 10 '15 at 07:53

score 1 · Answer 2 · answered Jan 08 '15 at 12:42

1

The simplest approach would be to format the text file as a js file:

var playerinfo = "1 online: Username";

and include the script like a usual js:

<script type="text/javascript" src="http://localhost/mytextfile.js"></script>

Then the page would have a variable playerinfo for your js code to use.

answered Jan 08 '15 at 12:42

Dmitry Sadakov

2,128
3
19
34

That actually looks... really elegant. I'll give it a try. – ian5v Jan 08 '15 at 12:45
The only thing is that I somehow need the Pebble to pull that variable off of a server. Can I just somehow point it at the server, through js, and it'll yoink the most current version of the script everytime, or do I need to do something with XMLHTTPRequest? – ian5v Jan 08 '15 at 12:58
This will not work on Pebble because the – sarfata Jan 09 '15 at 01:43

How can I load the contents of a small text file into a javascript var wo/JQuery?

2 Answers2