How to make JavaScript and Python work together?

Question

I want to make a two way communication model for JavaScript and Python. I want JavaScript to process a data and send it to Python and then Python processes it and sends it back to JavaScript. I don't have a clue how this can be achieved and how the communication between the two languages will be made.

Consider the example:

Read the comments for clarity of the model!

var files = [];
const div_files = document.getElementById("files");
const div_results = document.getElementById("results");

function fetchNames() {
  div_files.innerHTML = ""; // clears the file div
  div_results.innerHTML = ""; // clears the results div

  var checkbox_elements = document.getElementsByClassName('filename');

  Array.from(checkbox_elements).forEach(function(k) {
    if (k.checked) {

      files.push(k.value);
      div_files.innerHTML += k.value + '<br>';
    }

  });

  // the files array should now be shared with python 
  
  //console.log(files);

  // JavaScript SHOULD WAIT while PYTHON processes the data and shares the cal_array with JS

  // when the cal_array is available with JS only then it shall start processing the code mentioned below
  
  var cal_array = [
    [2231, 11640, 104621],
    [2231, 11640, 104621],
    [9, 494, 3339]
  ];
  Array.from(cal_array).forEach(function(k) {
    div_results.innerHTML += k + '<br>';
  })



};

<form>
  <input type="checkbox" class="filename" value="./first.html">First File<br>
  <input type="checkbox" class="filename" value="./second.html">Second File<br>
  <input type="checkbox" class="filename" value="./third.html">Third File<br>
  <br>
  <input type="button" value="Submit" onclick="fetchNames()">
</form>
<br>
The selected file(s) are:
<div id="files"></div>
<br> The result shows the number of lines, words, and characters of the respective files mentioned above:
<div id="results"></div>

The Python Script is as follows:

import os

files = ['./first.html','./second.html','./firstfile.txt'] #this array should be passed into python by the JS script
cal_array = [] #this array should be shared with JS after data has been entered into it
def calculation(): # this function calculates the number of lines, words and characters of the selected file(s)
    for val in files:
        file_details = []
        fname=(val)
        infile=open(fname, 'r')
        lines=0
        words=0
        characters=0
        for line in infile:
            line = line.strip(os.linesep)
            wordslist=line.split()
            lines=lines+1
            words=words+len(wordslist)
            characters=characters+ len(line)
        file_details.append(lines)
        file_details.append(words)
        file_details.append(characters)
        cal_array.append(file_details)

calculation()


print(cal_array)

# some code here to share cal_array with javascript

I'm a noob in Python, but I want to know how to make the two languages interact with each other? I'll really appreciate any help!

You can't really "share" data; the javascript runs in the browser in a way that's isolated from the rest of the system. What you can do is set up a Flask server (or another Python-based web framework like Django). It could render a page with some javascript. The javascript would POST an AJAX request to a second "page," again rendered by the Flask server, that accepts and returns json. Needless to say, this is way too complex for a single question to cover. Learn Flask, learn AJAX, and ask specific questions when you get stuck. — senderle
– senderle, Commented Nov 16, 2017 at 13:02
Where by "AJAX" I mostly mean "how to use XMLHttpRequest or a javascript library that makes it easier, like fetch." — senderle
– senderle, Commented Nov 16, 2017 at 13:05

Mads Marquart · Accepted Answer · 2017-11-16 13:04:59Z

5

If what you want is to create a web-app, and then send the data from there to your server via. AJAX, where you will work on the data in Python, what you need is something like Flask.

If what you want is to create a web-app that also runs the Python code, you need a python interpreter written in JavaScript, something like pyjs

answered Nov 16, 2017 at 13:04

Mads Marquart

4901 gold badge7 silver badges15 bronze badges

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

1 Comment

Anderson Green Over a year ago

Pyjs seems to be unmaintained: the GitHub repository hasn't been updated since 2015. But there are other ways to run Python in the browser (using Pyodide, for example).

Imre_G · Accepted Answer · 2017-11-16 13:02:26Z

3

There are a lot of ways to do this and this is quite a broad question. Since JavaScript exists in the browser and python is run on your computer, you must set up some sort of webserver for the two to talk together. The most common and easy way is to go via the normal HTTP request response method. The most straightforward combination is Flask on the python site and AJAX on the JavasScript side. However, there are a hundred other ways to do this. I would suggest to read up on:

REST APIs: https://www.codecademy.com/courses/javascript-beginner-en-EID4t/0/4

Ajax (JavaScript) https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp

Flask (Python) http://flask.pocoo.org/

answered Nov 16, 2017 at 13:02

Imre_G

2,5251 gold badge20 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to make JavaScript and Python work together?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related