How to Filter Listing Based on REST API Query Type

In this tutorial, we will describe how to filter the REST API items based on several parameters.

For this, we need to create a “REST API Query” with the “JetSmartFilters Query” macro, create a Listing template based on this query, and place the Listing Grid and filters on a page.

As an example, we will use the “Crocoblock widgets” REST API endpoint and filter items by “plugin” and “topics” parameters.

Another example can be observed in the REST API filter demo.

Register a REST API Endpoint

Navigate to WordPress Dashboard > JetEngine > JetEngine > REST API Endpoints and press the “+ New Endpoint” button.

Fill in the Name, enter the API Endpoint URL, set the Items path, and press the “Send Request” button to connect your endpoint.

After the green “Connected” text appears in the Status field, press the “Save” button.

Create Filters

Go to the WordPress Dashboard > Smart Filters > Add New tab.

Enter the Filter Name and select the Filter Type (it can be “Select,” “Radio,” “Visual,” or “Checkboxes list”).

In the Data Source dropdown, select the source of options by which the REST API data will be filtered. 

For example, to filter the Crocoblock widgets by plugins, we create the JetEngine Glossary with the plugin list.

So, we select the “JetEngine Glossary” option as the Data Source, but you can pick whatever suits your needs.

Respectively, we set the needed option in the Select glossary dropdown.

In the Query Variable field, we press the “database” button and pick the “Plain Query Variable” option. As the Variable Name, we enter the “plugin” parameter.

In the same way, we created a filter for filtering Crocoblock widgets (REST API items) by topics.

Create a “REST API Query”

Go to WordPress Dashboard > JetEngine > Query Builder > Add New to create a custom query for the connected endpoint.

Fill in the Name and select “REST API Query” as the Query Type.

In the REST API Query section, specify the endpoint in the From Endpoint dropdown.

In the Query section, press the “Add new” button and add two query clauses.

In the Key field, we enter the parameters by which we will filter the REST API items (“plugin” and “topics” in our case).

In the Value field, we push the “database” icon and select the “JetSmartFilters Query” macro. We set the “Plain Query Var” Type, enter the Variable Name the same as in the filter’s Query Variable settings (“plugin” and “topics” accordingly), and choose the “Plain” Result Format.

To save the settings, we press the “Apply” button and set the second query clause the same way.

After that, the “Add/Update Query” button can be clicked.

Build a Listing Based on This Query

Head to the WordPress Dashboard > JetEngine > Listings/Components tab and press the “Add New Item” button.

In the Setup Listing Item pop-up, pick the “Query Builder” option as the Listing source, set the just-created custom query in the Query field, enter the Listing item name, and choose the Listing view (for this case, we choose “Elementor,” but it can also be “Bricks,” “Timber/Twig,” or “Blocks (Gutenberg)”).

Afterward, we click the “Create Listing Item” button.

In the editor, craft the listing layout using the Dynamic Widgets & Blocks. 

For example, if you use Dynamic Fields, set the “Post/Term/User/Object Data” Source. In the Object Field dropdpown, find the REST API: (your endpoint name) section and choose the needed fields from that.

If you are certain that security is not a concern in specific cases, you can use this snippet to turn off sanitization in the Dynamic Field:

Paste this piece of code to the WordPress Theme Editor or insert it using the Code Snippets plugin (or a similar plugin).

Then, open the Advanced settings tab of the required Dynamic Field and paste ‘disable-sanitize’ into the CSS Classes field.

If the source is the Glossary options, the Dynamic Field shows the values. To display labels, enable the Filter field output toggle, pick the “Get labels by glossary data” Callback, and select the required glossary in the Get labels by glossary dropdown.

After you finish customizing the listing, save the settings.

Place a Listing Grid and Filters on a Page

Open a page or template in the Elementor/Gutenberg/Bricks editor.

Place the Listing Grid with the selected Listing and two filters with the “JetEngine” provider set in the This filter for dropdown. Save the settings.

Check Results

Proceed to the front end and test how the filters work with the Listing Grid.

That’s all. Now you know how to filter REST API items by several parameters using the JetSmartFilters and JetEngine plugins for WordPress and set up a listing template based on the “REST API Query” type with the “JetSmartFilters Query” macro.