Introduction

Pyscript/Pyodide supports excellent interoperability between JavaScript and Python. Python can call JavaScript and JavaScript can call Python. DOM events can use Python functions as callbacks. This article covers Python calling JavaScript functions and how to pass and receive data using Proxy. In another article, I cover calling Python from JavaScript and how to use Python in events.

Pyscript: JavaScript Event Callbacks

Pyodide attaches JavaScript functions to the global namespace. To import the global namespace into Python include this line:

If you will be calling async JavaScript functions, also add this line:

Calling JavaScript from Python

This example defines a JavaScript function square() that is called from Python. The key is to import the module js and call JavaScript functions using the js namespace. This is a complete example that you can copy and paste into a local file and load into the browser. I prefer to start a simple Python webserver to run examples: python -m http.server 9000. Future examples will not include the HTML boilerplate.

Calling Async JavaScript from Python

The key to calling JavaScript async functions is to import asyncio and use the await keyword as shown in this example.

This is a more complex example that calls the JavaScript fetch function. Notice how to await async function completion. This example will display your public IP address.

JavaScript returning an object

When a JavaScript function returns an object to a Python caller, a JsProxy is returned. If you try to iterate the proxy, an error is reported.

An example that fails:

The solution is to call object.to_py(). This example works correctly:

Passing an object to JavaScript

If you pass a Python object to a JavaScript function, the function receives a Proxy. To get individual keys, call obj.get(“keyname”):

Another option is to import the to_js() helper and covert the Python object.

This is similar to PyProxy.toJs, but for use from Python. If the object can be implicitly translated to JavaScript, it will be returned unchanged. If the object cannot be converted into JavaScript, this method will return a JsProxy of a PyProxy, as if you had used pyodide.create_proxy.

Convert a dictionary to a JavaScript object

To convert dictionaries, use the Object.fromEntries() API.

The fromEntries() method transforms a list of key-value pairs (Python dictionary) into an object.

An example is calling the JavaScript fetch() API. The fetch() API requires that the headers parameter be a JavaScript object.

Converting Python BytesIO Object to JavaScript Blob

To convert a BytesIO object to a Blob, often used with the file API:

Summary

Hopefully, this introduction helps you understand how to call JavaScript functions from Python and pass and receive data including objects. As Pyscript develops, I am sure there will be many more automatic conversions and more functions to support type conversion.

More Information

Photography Credit

I write free articles about technology. Recently, I learned about Pexels.com which provides free images. The image in this article is courtesy of Ashithosh U at Pexels.