Connect to API using JQuery

Development
1

How can i connect to the API using JQuery?
I want to build a small interface to get basic print info.
Thanks.

2

fairly easy, you just need to create an application key in OctoPrint's settings and include that in your get request header.

$.ajax({
    url: 'http://octopi.local:5000/api/',
    headers: { 'x-api-key': 'your key here' },
    type: 'GET',
    dataType: 'json',
    data: JSON.stringify({command: 'what command'})
});

the command will depend on what you are trying to pull, as well as the URL and type.

3

You can also download the OctoPrint Client JavaScript library from your server, which is backed by jQuery and lodash. More details on that below:

https://docs.octoprint.org/en/master/jsclientlib/index.html

5

adding a reference to the JS file get me this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'isFunction')
** at Function.OctoPrintClient.createCustomException**

6

As it says on that page, you also need to use lodash as well to use the OctoPrint client. I've copied part of that text here:

Regardless of which way you use to include the library, you’ll also need to make sure you included jQuery and lodash, because the library depends on those to be available (as $ and _ ). You can embed those like this:

Moreover, if you need to use the socket module, you’ll need to include sockJS. You can embed it like this:

1 Like