Pass Python array to javascript?

Question

I'm new to HTML/javascript. I'm running a local server, with an html/javascript file and a separate python script.

Question: How do I pass a python array to javascript variable?

Work so far: I've written the array to file data.txt:

1  32.1
2  10.0

but I could put it in JSON format if it's easier.

Here's my progress so far:

var x_pos = [];
jQuery.get('http://127.0.0.1:8000/data/data.txt',function(data){

// ??? Code here ???

});

console.log(x_pos[0])

Note: if there is a much simpler way to do this, I'm open to suggestion. Thanks.

you could split at every newline, and then again at the space between the number and the value. — ndugger
– ndugger, Commented Aug 28, 2015 at 14:55

MazzCris · Accepted Answer · 2015-08-28 15:18:14Z

4

var x_array = [];    
var y_array = [];     

jQuery.get('http://localhost/test/data.txt',function(data){
    var lines = data.split(/\r\n|\n/g);
    for (var i = 0; i < lines.length; i++) {
        line = lines[i].split(/\s+/g);
        x_array.push(line[0]);
        y_array.push(line[1]);
    }
    console.log(x_array);
    console.log(y_array);
});

edited Aug 28, 2015 at 15:18

answered Aug 28, 2015 at 14:59

MazzCris

1,8301 gold badge14 silver badges21 bronze badges

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

6 Comments

Daniel Lizik Over a year ago

What if OP has \r\n as carriage returns?

MazzCris Over a year ago

Updated to handle \r\n case and one or more spaces between the two values in every line of text file.

MaxZoom Over a year ago

Yes, this is also what I would do to parse the file split('\n') and line split('\s+')

anon01 Over a year ago

@MazzCris Thanks , this works pretty well...except that console.log(x_array) returns undefined when outside of the jQuery.get(...) call. Any suggestions? I thought I had a handle on scope :/

MazzCris Over a year ago

@anon0909 jQuery.get() is asynchronous (being a shorthand Ajax function as explained here: api.jquery.com/jquery.get ). Anyway I think you should get an empty array in that case (as it was initialized), not undefined

|

smnbbrv · Accepted Answer · 2015-08-28 14:55:44Z

3

Use JSON instead. Then you can just parse it as

jQuery.get('http://localhost/data.txt', function(data) {
  var xy = JSON.parse(data);
});

and use as

alert(xy['1']); // or xy.propertyname if it is not-numeric

Your data structure would be like

{
  "1": 32.1,
  "2": 0
}

answered Aug 28, 2015 at 14:55

smnbbrv

24.7k9 gold badges85 silver badges115 bronze badges

7 Comments

Daniel Lizik Over a year ago

It's a text file, how can you use json.parse on something that isn't in json format?

brso05 Over a year ago

@Daniel_L THIS is a better solution.

Shilly Over a year ago

The OP specifies that if there's a better way to handle the parsing by changing the format and/or extension of the text file, we should suggest it, So I agree that putting the text in json format would simplify the parsing tremendously and give the OP the simplest way to get the data into variables.

CodingIntrigue Over a year ago

@brso05 I didn't see that initially. I have adjusted my votes accordingly. Without spamming the comments in bold

smnbbrv Over a year ago

@anon0909 JSON is very comfortable to use, it is easy to read, it is supported by nearly every programming language which makes it one of the best ways to communicate between client and server.

|

Superdrac · Accepted Answer · 2015-08-28 14:57:50Z

2

Just create a json structure for this and do a JSON.parse(data) after.

Here is your structure:

{x: [1,2,3,4], y:[32.1,10.0,76.3]}

answered Aug 28, 2015 at 14:57

Superdrac

1,20817 silver badges29 bronze badges

Comments

Deepak Puthraya · Accepted Answer · 2015-08-28 15:09:24Z

1

One of the solutions is use split. It splits the string.

    var newData = [];
    data = data.split('\n');
    data.forEach(function(entry){
      entry = entry.split(' ');
      newData.push({
        x : entry[0],
        y : entry[1]
      });
    });
    console.log(newData);

answered Aug 28, 2015 at 15:09

Deepak Puthraya

1,4453 gold badges18 silver badges28 bronze badges

Comments

Daniel Lizik · Accepted Answer · 2015-08-28 15:11:53Z

1

You need to use regular expressions to parse the text file. You cannot just use JSON.parse() on a string that isn't in json format.

http://plnkr.co/edit/39aBGgwvNI7Lem6eiefu?p=preview

$.get("http://localhost/data.txt", parse);

function parse(str) {
    var lineBreak = /\r\n/g;
    var space = /\s/g;
    var tmp = str.split(lineBreak).map(function(l) {
        var split = l.split(space);
        return { key: split[0], val: split[1]  };
    });
    var data = JSON.stringify(tmp, null, 2);
    $("#data").text(data);
}

answered Aug 28, 2015 at 15:11

Daniel Lizik

3,1422 gold badges24 silver badges44 bronze badges

Collectives™ on Stack Overflow

Pass Python array to javascript?

5 Answers 5

6 Comments

7 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related