Drupal Rest API with paragraph type field

Here I am explaining an use case where you want to export  a view as a rest export  with a paragraph type field.

As you already know . paragraph field is used for holding a  group of fields with values  in a  single node. you can read more details about paragraph module and how this module can be configured in Drupal back end.

For example suppose I  have content type with fields title, id and plans. Suppose each node have id and  title , also plans will have plan name plan price. For each node, number of plan name and plan price will varies and entries will be more than one.  So here we are creating a paragraph field called ,plan which can hold plan name and plan price. More details how to create paragraph you can see in this article.

Here I am explain how we can achieve a rest API response as shown below.

[{"title":"article2","field_plans":5,"view":[{"id":"5","field_plan_name":"plan2","field_plan_price":"20"}]},{"title":"article1","field_plans":"1, 2, 3, 4","view":[{"id":"1","field_plan_name":"plan1","field_plan_price":"20"},{"id":"2","field_plan_name":"plan2","field_plan_price":"21"},{"id":"3","field_plan_name":"plan3","field_plan_price":"22"},{"id":"4","field_plan_name":"plan3","field_plan_price":"23"}]}]

Here view key holds a paragraph field values.

While creating API’s it is important to provide API response in proper format with key value pairs.  Most of the front end UI framework such as ReactJS and angular js , expecting response in JSON object format.  For normal fields of a node we can just export view as rest export and it will provide result proper format. But for paragraph field to get in JSON format is difficult.

Here I am explaining how we can provide proper json object in Rest export for paragraph field which have multiple values in a single node.

Assuming you already enabled Rest full web service and all configuration done in Rest UI and test by exporting a sample view. Refer this article to see how we can create rest end points using Restfull web service module.

Download and enable below modules

1. Download and install REST export nested module(https://www.drupal.org/project/rest_export_nested)
2. Download and install views field view module. This module is needed to embed another view as field in view display. https://www.drupal.org/project/views_field_view

In my example I have an article content type which have paragraph field called Plans.  As shown below you can add multiple values in Plans.

Follow below steps to create  a rest export with paragraph field.

• Create Rest export view of paragraph type
• Create a view with rest export nested

Create Rest export view of paragraph type

As a first step we have to create view of paragraph type. Here I am going to create a paragraph view of type plans

And select Rest export option.

Add all paragraph fields in view.

You can see response in preview mode as below. I have added few dummy contents fro article content type.

[{"id":"1","field_plan_name":"plan1","field_plan_price":"20"},{"id":"2","field_plan_name":"plan2","field_plan_price":"21"},{"id":"3","field_plan_name":"plan3","field_plan_price":"22"},{"id":"4","field_plan_name":"plan3","field_plan_price":"23"},{"id":"5","field_plan_name":"plan2","field_plan_price":"20"}]

Add Paragraph ID as context filter.

Then contextfilter configuration click more link.

Select allow multiple values option.

Now context filter created.

Click on save button.  Now we have created paragraph view which accepts paragraph id as filter.

Next we are going to attach this view in another where we are going to display articles content.

I have a view of content type article. Next I am going to create another  view , Rest Export Nested.

I have added field title and add paragraph type field.

In configurations   rewrite results.

Next click on add fields and select view as field as shown below.

You can see new Global view field added.

Then in configuration of view field select view to be displayed in this field.

Here I selected my paragraph view – Plans and display also selected.

Apply context filter as shown . field _plans is the paragraph field added just before adding view field.

You can see this token in replacement patterns. Make sure your paragraph field is above your view field in order to appear in replacement tokens.

So API response will be as below.

[{"title":"article2","field_plans":5,"view":[{"id":"5","field_plan_name":"plan2","field_plan_price":"20"}]},{"title":"article1","field_plans":"1, 2, 3, 4","view":[{"id":"1","field_plan_name":"plan1","field_plan_price":"20"},{"id":"2","field_plan_name":"plan2","field_plan_price":"21"},{"id":"3","field_plan_name":"plan3","field_plan_price":"22"},{"id":"4","field_plan_name":"plan3","field_plan_price":"23"}]}]

You can hide field_plans from display by selecting Exclude from display option from field configurations.

In above response you can see paragraph values with field name  for each node in view key.

Conclusion

Paragraph module is a very useful module and provides  wide range of options for the design, layout and grouping of your content. Here I explained a solution for developers facing while exposing node with paragraph field as Rest end point.