Drupal 8 REST/JSON - integration with simple JavaScript application

05.01.2017

Over the course of recent years, websites have undergone a significant change. Many new services and social media websites have been created, mobile applications now play a very significant role on the internet, and various on-line services exchanging data is nothing out of the ordinary anymore. We could even say that integration with external services is standard now, especially in the case of large e-commerce applications or on-line payment systems.
Here we may ask ourselves a question: can we communicate with external services using Drupal? Of course we can. This functionality was available in old versions of Drupal, but with Drupal 8, the RESTful Web Services API module started being included by default in Drupal core, which shows that it is an important and much-needed element in complex on-line applications.

Today we are going to discuss one of the more popular data exchange formats - JSON.

In our example, we are going to use Drupal 8.2^ and jQuery to write a simple JavaScript application. We are going to use Drupal as our CMS for managing data, and our content will be displayed on a “light” HTML website.

1. First, we install Drupal 8 and turn on our modules:

The RESTful Web Services API is new in Drupal 8

Serialization

2. Then we download and turn on the REST UI module (this step is optional but useful).

3. Configuration using REST UI - displaying the node in JSON format.

Now we are going to adapt our content type to integration. In our example, we are going to use the NODE entity. Go to /admin/config/services/rest. Select “content type” and set format json, auth cookie in the GET method. In this case, we are only going to download data, so the GET method will be perfectly fine.

If you decide not to install the REST UI module, you will have to enter the settings for all entities manually in config files. The above settings look as follows:
Filename: rest.resource.entity.node.yml

5. List of nodes in JSON

All right, so downloading single nodes is already working. Let’s now try to get a list of nodes.
We are going to use the Views module.

Provided that we are not going to use the majority of available data, we can select just the fields that concern us in order to reduce the amount of data transferred.

To sum up: we created a list of content located at /node_list, and by adding ?=_format=json to our URL we can download any of them in JSON format.

6. Own address for REST/JSON (endpoint)

If - for any reason - the above solutions aren’t enough, we can create our own endpoint and add new data to our JSON.
Let’s create routing and a controller.

Routing

First, let’s start from creating a routing at, e.g. /v1/custom_endpoint. Entering our API version in the URL is definitely good practice, since while creating a newer version we can leave it at /v2/custom_endpoint, /v3/... etc. This way our users who use an older version of the API won’t get cut off from our resources.
Routing example:

Explanation: by requesting GET at /v1/custom_endpoint we are going to receive the data returned by EvEndpoint controller executing GET method.

Controller

For this example, we will assume that our endpoint is supposed to return basic information about our website - the name and e-mail address, current time stamp and a random node with ID of 1 through 10.

The data variable contains our json, now we can add it with our variables to the HTML body using append function.

If everything has been done properly, upon displaying index.html in our browser, the JavaScript requests the data from our Drupal and downloads it in JSON format, and then adds them to the body of our website.

Summary

These are some basic information regarding starting the adventure with web services using Drupal. In the next part, we are going to write about logging into Drupal using an existing user account, as well as adding and editing content via REST/JSON.
If you want to further expand your knowledge about D8 and other tools useful for designing web applications, give us a like on Facebook, where we share our tutorials, guides and various interesting stuff from the industry. You can also take part in Drupal Day and the Drupal Camp! New content is also coming soon to our blog!

Get blog updates in your inbox!

Sign up for out newsletter and get e-mails of stories like this.

Your name

Your e-mail address

By Subscribing to our newsletter you agree for terms and conditions

By sending the form You consent to process Your personal data by DROPTICA Sp. z o.o. based in Wrocław ul. Duńska 9 and to entrust data to subjects cooperating with DROPTICA Sp. z o.o. for processing purposes. Submission of data is voluntary, however, lack of consent for personal data processing makes it impossible to answer your question. You have the right to access your personal data and correct it.