Fetching an API with Node-RED

What Will I Learn?

In this tutorial you will be learning how to fetch an API and display the data into a Node-Red Dashboard.

Requirements

To be able to follow this tutorial, you should be familiar with Node-Red and have it installed in your environment. If this is not the case, feel free to follow my previous tutorial:

Node-Red - Getting Started with Dashboards

My previous tutorial includes steps on how to install NodeJs and Node-Red as well.

Difficulty

• Basic

Tutorial Contents

Making the flow

In the last tutorial we left in this step were we had a Gauge controlled by a Slider:

But now, we will delete this to start doing a HTTP call to a rest API and parse the data to the dashboard. In this tutorial, we will fetch a fake API used for testing purposes https://jsonplaceholder.typicode.com and we will use the following endpoint:

https://jsonplaceholder.typicode.com/posts

To get started, let’s discuss about the flow. In Node-Red, we can make a HTTP get request by using two components:

Inject
HTTP Request

So, from the left menu, drag those 2 components in the flowchart and connect them:

Basically, the logic in this is easy. The injector tells the http request when to start, the http request fetch the api and return the response. So now, let’s tell the http request component which API we will fetch. To do so, double click http request component and reflect the following change:

What I did was change the url and insert the one we are using in this tutorial:

https://jsonplaceholder.typicode.com/posts

And replace the return type to a parsed JSON Object. Right now, there is not way to know that this works. However, let’s insert a debug component which will be connected to the http request to listen the response:

Before testing, make sure to click the deploy button in the right top corner:

After deploying, you are able to test it. But wait! How do I test it? Easy, do you see the button in the left side of the inject component? Click there and then click in the Debug tab in the right side menu:

After clicking the injector button, you will get the following results:

Since this is working, lets create a function to get the length of this array and send the data to a Gauge. The first thing is to drag and drop the function component in the left side menu and connect it to the http request right side:

Now, let’s write our function. The function will basically return an object with a key named payload (which you should always use if you want Node-Red to work correctly) and the value will be the length of the array returned from the http response. Always, the http response can be retrieved using:

msg.payload

return {
    payload: msg.payload.length
};

Click on done and add another debug component to the flow and connect it to the right side of the function:

Now, deploy and trigger the injector to see the response in the debugger console. You should expect the following response; The array itself and the length:

Since it is returning the correct data, let’s send this data to a Gauge. To do so, drag and drop a gauge component from the left side menu and connect it to the right side of the function:

Then, double click to add the Gauge to the UI that we created in the last tutorial:

Click on done and deploy. Then, trigger the injector again and open the following URL: http://127.0.0.1:1880/ui and you should expect the Gauge to be in the maximum:

And that’s it! That easy we can make http request to APIs in Node-Red without even need to “code”.