Getting data from the Are.na API
Cables includes among its various nodes the operator HTTPRequest which simplifies the use of HTTP requests to communicate with external APIs and servers. In this article, we will explore how to use the operator to retrieve images from the Are.na API.
When working with APIs in Cables there are generally two steps, creating the request and handling the response.
Creating the request
To create a request to the Are.na API via HTTPRequest we must first define the URL of the API. So that we define the channel from which we want to get the images(The requested channel will have to be public). This will be done by entering the correct address to request. Then enter in the URL field of HTTPRequest this link:
"https://api.are.na/v2/channels/:slug/contents"
where :slug should be replaced with the slug of the channel from which you wish to retrieve the images.
//example URL "https://api.are.na/v2/channels/tmtti/contents"
The are.na API gives us some options to better define our request, in this case we will use the string "?page=1;per=100", to be added to the end of the URL, which allows us to request up to 100 contents from the first page of the channel we are requesting from.
Within Cables we can handle the URL string as a series of strings and concatenate them together with theConcatMulti op.
Once the URL is defined we will need to set the method of our request. HTTP requests to the API can be of various types, in this case we will make a request with HTTP Method "GET", default option onHTTPRequest . The are.na API will respond with a JSON file, so leave the other options as default.
Once the request is set send it using the trigger request option, which can be triggered either manually or via an external trigger.
Response handling.
If the request is successful we will receive from HTTPRequest a status code "200" and a JSON Object containing all the requested data, which will later have to be extracted.
The response we will receive will look something like this:
{
"contents":
[
{
"title": "Modem Studio -img 133",
"updated_at": "2025-01-09T10:12:01.312Z",
"created_at": "2025-01-08T09:06:11.009Z",
"state": "available",
"comment_count": 0,
"generated_title": "Modem Studio -img 133",
"visibility": "public",
"content": ".\n\n27 12 2000\n21:32:13\n",
"description": "https://img.modem.studio/",
"source": {...},
"image": {
"thumb": {
"url": "https://images.are.na/ey..."
},
"original": {
"url": "https://d2w9rnfcy7mm78.cloudfront.net/33..."
}
},
{
"title": "second- block",
"updated_at":...
},
]
}
For a more detailed discussion of how this works see the glossary: object
In Cables there are several operators to access objects, in this case we are dealing with object containing an array of objects called "contents".
In this case we can use the ObjectGetArrayValuesByPath operator.
In ObjectGetArrayValuesByPath we can define the path from which to extract the data, for example if we wanted to access the title of each block we can do it through this code:
//$ to access each object in the array contents.$.title
In order to retrieve the image of each block there is a few more steps to take, as the "url" key is inside the "original" key, which in turn is inside "image." Therefore, using the same logic as before, we can proceed with:
contents.$.image.original.url
In output we will receive an array with links to the respective images, which can be loaded as Texture within cables via the TextureArrayLoaderFromArray operator.
Useful links: