1

I have an array as follows in javascript: 

var linePoints = [[0, 3], [4, 8], [8, 5], [12, 13]];

But I would like to load this from a textfile instead of defining it in the code. The file:

input.txt: 

0 3
4 8
8 5
12 13

I noticed this other post, which talks about something similar, but for a 1D array. I was wondering if there is a special function to do this for 2D. In java, I would read each line, then split it. But to be fair, I am new with javascript.

Community
  • 1
  • 1
dorien
  • 5,265
  • 10
  • 57
  • 116
  • are you using node.js ? – Mulan Aug 25 '16 at 21:43
  • Not that I know of, I am using it in jquery.flot – dorien Aug 25 '16 at 21:45
  • Do you control the format of the input file? – trincot Aug 25 '16 at 21:46
  • Yes, I could easily change it so each line is [0,3] for instance. – dorien Aug 25 '16 at 21:48
  • I guess in that case, if I prepend the datafile with – dorien Aug 25 '16 at 21:50
  • How about [JSON](https://en.wikipedia.org/wiki/JSON) as the format for your data file, then you can use [JSON.parse](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) or [JSONP](https://en.wikipedia.org/wiki/JSONP) (or [getJSON](http://api.jquery.com/jquery.getjson/) if using JQuery) – Xotic750 Aug 25 '16 at 22:10

3 Answers3

4

This should do what you're looking for: 

$.get("textFile.txt", function(data) {
      var items = data.split("\r\n").map(function(el){ return el.split(" ");});
  });

Here a working example: http://plnkr.co/edit/htsf9yBuygAhv7vznS2g?p=preview

Michele Ricciardi
  • 2,107
  • 14
  • 17
  • Yes, one additional question. How do I make "items" available outside this function in javascript? It seems to be only in the jquery function. Sorry I'm new with jquery. Is there an easy way to "return" this variable? – dorien Aug 26 '16 at 12:52
  • I've tried the following to adapt the code to return data as a variable. function showGetResult (name, callback) { data= $.get(name, callback); items = data.split(/\r?\n/).map( pair => pair.split(/\s+/).map(Number) ); return items; } var items = showGetResult("./moonlight_sonata_diameter.data", function(data){ ); – dorien Aug 26 '16 at 12:56
  • ok what we are dealing with is asynchronous code, you can deal with async code in few ways, the most common being callbacks and promises, there are other ways too but they don't work in all the browsers – Michele Ricciardi Aug 26 '16 at 13:04
  • what you're doing is almost correct but there's basically no way to make your various items contain the result in that way. what you can do instead is to write your logic inside the callback, I'll draft up an example in the next hour – Michele Ricciardi Aug 26 '16 at 13:05
  • Yes I just tried that. It works if I draw my plot inside your function ( $(function () { plot =... etc) . One question with that is, I want to be able to access the plot afterwards (e.g. plot.setCrosshair({x: 100})) But that doesn't seem to work. Is there a way I can still call the plot afterwards? Now it's not just a global javascript variable anymore. Thanks! – dorien Aug 26 '16 at 13:09
  • any chance you can put up a small example? What you can do is to just have var plot; $.get (..); // you can access plot here but may or may not be initialised depending on whether the callback executed – Michele Ricciardi Aug 26 '16 at 13:13
  • I've put it here. For some reason the plot is not loading, although I've added all the dependencies. Anyway it might be easier to see what I mean like this. http://plnkr.co/edit/KDiwBj36j9blvamn7g6g?p=preview – dorien Aug 26 '16 at 13:29
  • 1
    I think the dependencies were the wrong way round, jquery needs to be loaded before jquery flot, I forked it here: http://plnkr.co/edit/PzU4yjzczBuWDGP5MaKL?p=preview – Michele Ricciardi Aug 26 '16 at 13:57
  • Thank you. It now works indeed. Maybe there is some way to access plot as a global variable? window.plot or so? – dorien Aug 26 '16 at 14:16
  • yes that's correct if you don't put `var` in front of a declaration, it's attached to the global `window` object. so you can do `window.plot` or `plot` and you will be able to access it – Michele Ricciardi Aug 26 '16 at 14:18
  • just FYI in general it isn't good practice (e.g. what happens when you want 2 plots) but I think in your case it may be OK if you are just trying to visualise some data – Michele Ricciardi Aug 26 '16 at 14:20
  • Actually, I might want more plots on the page. So let me give the other way a go. Although I would rename the plots. – dorien Aug 26 '16 at 14:21
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/121942/discussion-between-michele-ricciardi-and-dorien). – Michele Ricciardi Aug 26 '16 at 14:24
  • Did any of the answers suit your needs? Could you leave a comment or accept one? – trincot Sep 13 '16 at 17:55
2

You need to pay attention to different newline styles, and you probably want the array to have numbers, not strings.

So I propose this code:

$.get("textFile.txt", function(data) {
    var items = data.split(/\r?\n/).map( pair => pair.split(/\s+/).map(Number) );
});
trincot
  • 317,000
  • 35
  • 244
  • 286
0

There's no built-in generalized function for parsing input the way you want. However you could take advantage of the String.split() function which will break a string into any number of smaller strings based on the delineator you pass it:

var foo = "0 3";
var bar = foo.split(" "); // split based on single space character
console.log(bar); // ["0", "3"]
jered
  • 11,220
  • 2
  • 23
  • 34