Menu Icon

Working with Rest APIs

Get and display data from Rest APIs

There are several ways to add Rest APIs to your no-code app depending on the nature of the data you intend to use.

You may decide depending on which option is closer to your use case:

  • Displaying a dataset from a Rest API in a repeated and structured way
  • Using data from a Rest API in any component for a unique purpose

Using a Rest URL That Works

In order to make sure your app is connecting to your Rest API correctly, you first have to make sure the Rest URL is working and giving you the expected output. In our examples, we will be using this Rest URL:

https://randomuser.me/api/?results=20

It's good practice to familiarize yourself with the output of the Rest URL you are using. You'll find that what you need to write in some of steps when connecting a Rest API to your app depends on how the Rest API outputs the data it is sending -- often in its own unique way.

Also, when using Rest data you may need to preview your page and app often in order to see the effects of your changes. This is because often times Rest requests will not be triggered unless you run your app.

Displaying Rest API Data in a Structured Way

There are some components in Code2 that are specialized for displaying structured, repeating data. The two main ones are the List and Table components.

Using a List Component with a Rest API

A list has the advantage of giving you greater flexibility for customizing the appearance of the data while also displaying the repeating data in a predictable manner.

In addition to the description here, you can also check out the how-to video for connecting a list to a Rest API.

The regular List component is for manually creating a list. We will use the Data List component, which is more appropriate for working with datasets.

So to start off:

  1. Add a Data List component to your page (See "Using components".
  2. Select the Card View option for the List and then choose the "Simple Card" template
  3. For the created list component, select "Open Rest Configuration" in the data source panel (See "Component Properties")

The last step should have opened the Rest Editor, as seen below. We are now ready to connect the list to a Rest API.

For this example, we will use a public rest service ("https://randomuser.me/api/?results=20") for our Rest URL. This is a test service that sends information on a list of randomly generated users.

In order to retreive the data from the Rest API correctly, we will have to know how the Rest API sends its data. For this specific URL, we know the Rest API puts the list of users into a variable called "results". Therefore the Data Root field will be "results".

Now when you click on "Send", Code2 will request data based on this Rest API and display the corresponding output. In this example, the output shows a list of rows, where each row contains information about a single user and each column contains variable names corresponding to specifc user information.

Notice also how there can be nested items in the data. For example, the "name" property of a user contains "title", "first", and "last" values.

Now you can click on "Update" on the Rest editor in order to use this data in your List Component. Every user that is contained in the "results" variable can now correspond to a card item on your list.

But first you have to specify which information you want to display where.

If you've added a Data List with the Simple Card template as mentioned above, it should initially look like this in the Code2 editor:

Let's say we want each card title to be the name of each user. If you click on the "Card View" of the list you will see "Title of Card #{__ index __}" in the Title field. We want to replace this with the user name.

In order to use variables from the Rest data for these fields, we have to use curly brackets around the variables. However, just typing {name} in this field won't work because, as mentioned before, in the Rest API that is specific to this example, the "name" item is a nested item with "title", "first", and "last" values.

So let's put {name.first} as the Title for the Card.

When we preview the page, we can see this works as intended.

How about if we want to display the title and full name?

In this case, we can just list the variables with spaces between them:

(Remember: these variable names have to match up with the output of the Rest API you are using. You can always check the output in the Rest Editor from the data source panel of the component to make sure you have the correct variables.)

If you preview the page, it should look like this:

Code2 also allows you to display images from a Rest API as well. Conveniently, the Rest URL in our example also provides images. You can confirm this by re-sending the Rest request in the Rest Editor of the list. When you explore the output you will see a "picture" variable.

The "+" button next to it indicates that it's a nested variable. Clicking on it shows that it contains three nested items: "large", "medium", and "small" -- each one containing a different image URL.

So let's say you want to add profile images to our users. We can first add an Avatar component to the Card Body on our list component.

In the settings panel for the avatar component, you can change the type to "image", click on "update image", and then enter {picture.medium} in the text field.

When you preview the page, it should look like this:

Using a Table Component with a Rest API

If you want to display the most amount of data in a compact way, you may prefer to use the Table component. This is the display type most like a spreadsheet.

When you add a table to the page, you can click on "Add Columns from DataSource", and select the REST option.

This will take you to the Rest Editor, where you can enter the same Rest URL as the list component example in the previous section.

When you check the output by clicking "Send", and then click "Next", you will be able to choose which data from the Rest API you want to display on your table.

We will keep only a few important fields and remove the rest.

You'll notice though that when the table is added to the page, the "Name" and "Location" columns are blank.

As you may recall from the previous section, this is because these variables in the Rest API contain nested values.

If you go to the data source panel and click on "Open Rest Configuration", and click "Send" and "Next", you'll see that you can update the column using the nested values of your choosing. In this case, we will be using the first name of the user for the name column.

For the location column, we'll use the city value. After we update the table with these settings, we get the desired result.

Using a Rest API with Any Component

When you add components to your page, you might notice that many of them do not have a data source panel similar to the Data List and Table component. So how do we add data from Rest APIs to any component?

Let's say we want to display information from a community or news site that has an Rest API. For this example, let's say we want to display the top voted comment for specific famous products that were first shared in the Hacker News community.

So the generic version may look like something like this:

Let's assume one of the products we want to display is Dropbox. We'll want to use the Rest URL for the original Dropbox post using the Hacker News API in order to display the original title of the post and the (notoriously pessimistic) top voted comment.

However, if you click on these components you'll notice they don't have a data source panel. So what we'll do is first click on the Page Component in the left navigation menu. Then we'll click on the Flows icon on the settings panel of the Page component.

Now we'll add an Action to the page by adding an Event and selecting "when component is initialized" for the Start Flow trigger. Then we'll choose the Rest API Request action.

We'll paste the Rest URL for the original Dropbox post in the URL field. The Rest URL from the Hacker News API for this example is: https://hacker-news.firebaseio.com/v0/item/8863.json?print=pretty

Now we'll want to set a variable name for the Rest data so that we can use it in the other components within the page. We can do this by clicking on "Add Action" and choosing the "Set Variable" action.

This action is added below the first one in the sequence. We'll set the variable name to "hn".

You'll notice in the "Source of Value" field the default option is "Previous Action Value". So we're essentially naming the Rest data we received from our previous action to "hn" here. This variable will now contain information regarding the original Dropbox post from the Hacker News API.

Now we'll want to set the title of the page to the title we'll get from the Hacker News API. We'll click on the existing title component on our page, and open the Flows settings on the right panel again. This time we'll add a "Calculated Property" instead of an action.

We want to set the "label" property of the Title component to the title from our Rest API. (For other components it might be the "text" property)

Because we are familar with the Hacker News API we know our "hn" variable will contain a "title" value. Hence, we can set the label property accordingly.

If you preview the page, you'll now see that the title is updated.

Remember, The Rest API actions are triggered when the page is displayed ("initialized"). So whenever you change the Rest settings, you should make a habit of previewing the page to check the result.

Now we want to add the top voted comment to this post. We'll click on the Page Component on the left navigation menu again and add another action in the Flows settings at the bottom of the action sequence on the right panel, same as before. This third action for the Page component will be a Rest request action almost identical to the first Rest action above.

The only thing that will be different is the Rest URL, which will be the URL for the top voted comment of the original Dropbox post: https://hacker-news.firebaseio.com/v0/item/9224.json?print=pretty

If you want to make sure the Rest URL is correct or check other Rest settings you can click on the settings/gear icon next to the URL field in order to expand the Rest editor.

Since this Rest data contains different information, we will want to set a different variable name. So we'll create a "Set Variable" action again, and call this data "topcomment".

We'll now click on the Paragraph component on the page and, as we did with the title component, add a Calculated Property to it. We'll set the label property to the "text" value of the top comment variable.

This seems to work. However, if you preview the page you might notice that it is not formatted properly and seems to have "<p>" characters in the text. It turns out that the text from the Hacker News Rest API contains HTML syntax. In this case then, it might be better to try the HTML component instead of the Paragraph component to display the data.

So we'll remove the Paragraph component and add the HTML component to the page. Then we'll add the same calculated property to HTML component, but instead of setting the "label" property, we will be setting the "code" property.

Now when you preview the page, it should looke like this:

Troubleshooting

If you're not getting the expected results for your page or app, there may be a mismatch between how you're addressing the Rest data and the structure of the Rest data you're receiving. There are a couple things that can help.

One is the Page variable panel that is displayed when you're previewing your page. If you click on Page Preview, you can actually explore the response of the Rest API on the left panel. This way, if you notice a variable mismatch or some missing data you were expecting, you can fix your variable naming or correct the way you're calling the Rest API if necessary.

In case there is a problem with your action sequence, the Flow actions also have a debug option. This will allow you to execute the actions step by step in order to pinpoint the problem. To enable this option, go to the Start Flow section at the top of your action sequence, and toggle "Debug on Page Preview".

Now when you preview your page, you will see a Debug panel at the bottom of the page with the list of actions you defined in your flow. By clicking "Next", it will execute the following action in the sequence, displaying the input and output used for each action.

Other Resources