{"id":39798,"date":"2023-05-12T08:51:40","date_gmt":"2023-05-12T08:51:40","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=39798"},"modified":"2023-07-28T13:50:43","modified_gmt":"2023-07-28T13:50:43","slug":"how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/","title":{"rendered":"How to Display Array Elements from REST API Endpoint Using Sub Query Addon"},"content":{"rendered":"\n

The Sub Query<\/strong> addon allows retrieving array elements from a parent object property. Use it to fetch array elements in objects passed in a REST API endpoint and display them conveniently as a nested listing. <\/p>\n\n\n\n\"array\n\n\n\n

Connect to a REST API Endpoint<\/h2>\n\n\n\n
\n

If you haven\u2019t connected to a REST API yet, navigate to WordPress Dashboard > JetEngine > JetEngine > REST API Endpoints <\/em><\/strong>and connect your endpoint.<\/p>\n\n\n\n\"connecting\n\n\n\n

Click the \u201cSend Request<\/strong>\u201d <\/strong>button to ensure the request is successfully sent and the data is retrieved in the correct format. Don\u2019t forget to save this endpoint.<\/p>\n<\/div><\/div>\n\n\n\n

Set Up a Custom Query for the REST API Endpoint<\/h2>\n\n\n\n
<\/svg><\/div>
Warning<\/div>

This step is optional. If you don\u2019t need to query the endpoint, you can move on to the next part of the article. However, creating a query will help you see the data structure of the endpoint. <\/p><\/div><\/div>\n\n\n\n

To create a custom query, go to WordPress Dashboard > JetEngine > Query Builder > Add New <\/em><\/strong>to create a custom query for the connected endpoint. Later, we will use this query to build the main listing for the REST API data.<\/p>\n\n\n\n\"creating\n\n\n\n

In the settings of the custom query, select \u201cREST API Query\u201d as the Query Type<\/strong>. Then specify the endpoint in the From Endpoint <\/strong>dropdown from the REST API Query section. If necessary, add more query clauses to narrow down the results. <\/p>\n\n\n\n

Save the query and enable the Preview results <\/strong>toggle to preview the data retrieved by the query.<\/p>\n\n\n\n\"preview\n\n\n\n

In our example, we receive a list of students and specific data associated with them. In each object (student), there is a \u201clanguages\u201d array property containing an object with three properties \u2014 \u201cfirst-language\u201d, \u201csecond-language\u201d, and \u201cthird-language\u201d. <\/p>\n\n\n\n

There is also an \u201cextra-activities\u201d array containing just string values instead of objects.<\/p>\n\n\n\n\"array\n\n\n\n

The elements of both arrays can be displayed as a nested listing with the help of the Sub Query<\/strong> <\/em>addon.<\/p>\n<\/div><\/div>\n\n\n\n

Download and Install the Sub Query Addon<\/h2>\n\n\n\n
\n

All the free addons for JetPlugins are listed on the DevTools<\/a> page. Navigate to that page, filter the addons by JetEngine<\/em>, <\/strong>and search for the Sub Query<\/strong> <\/em>addon. Click the <\/strong>\u201cDownload<\/strong>\u201d <\/strong>button.<\/p>\n\n\n\n\"downloading\n\n\n\n

Afterward, return to the WordPress Dashboard<\/em><\/strong> > Plugins <\/em><\/strong>tab, and press the \u201cAdd New<\/strong>\u201d button to add the add-on<\/a>. Then, activate the plugin.<\/p>\n<\/div><\/div>\n\n\n\n

Set Up a Sub Query to Retrieve the Array of Objects<\/h2>\n\n\n\n
\n

Now, we will use the Sub Query<\/strong> to retrieve elements from the array of objects.<\/p>\n\n\n\n

Create a new custom query in WordPress Dashboard > JetEngine > Query Builder > Add New<\/em><\/strong>. Give a name to the query and choose the new \u201cSub Query\u201d Query Type<\/strong> from the corresponding drop-down.<\/p>\n\n\n\n\"configuring\n\n\n\n

Move to the body of the query, the Sub Query <\/strong>section. <\/p>\n\n\n\n

The query is intended to work with nested listings. That means the Listing Template<\/strong> that will be later built based on this query will be placed inside the main Listing Template<\/strong>. The Sub Query retrieves data from the parent object property, and in our use case, the parent object is the listing for REST API data.<\/p>\n\n\n\n\"configuring\n\n\n\n

The first required field is the Parent Object Property<\/strong> field. It expects the name of the parent property from where the data should be retrieved. In this query, we will retrieve array elements from the \u201clanguages\u201d property of a REST API object. Therefore, we specify \u201clanguages\u201d as the parent object to get data. <\/p>\n\n\n\n\"preview\n\n\n\n

Now, set up the Item Schema<\/strong> for the single item of the Sub Query object. In the schema settings, we indicate which fields each item of the Sub Query should consist of. It is needed to fill in this data to get access to these elements in the widgets\/blocks settings. Therefore, add only those properties that will be displayed in the nested listing, as it is not required to use all available properties in the array.<\/p>\n\n\n\n

The Property Name<\/strong> sets the label of the query item property. It will define how the initial object property is labeled in the query results. The Initial Object Property<\/strong> specifies the actual name of the property from the array. In our case, it is \u201cfirst-language\u201d.<\/p>\n\n\n\n\"configuring\n\n\n\n

Add as many properties as needed to build the query item schema. Once done, save the changes.<\/p>\n<\/div><\/div>\n\n\n\n

Set Up a Sub Query to Retrieve the Array of String Values<\/h2>\n\n\n\n
\n

We will build another Sub Query to retrieve elements from the \u201cextra-activities\u201d array. This array consists of string values instead of objects.<\/p>\n\n\n\n\"array\n\n\n\n

Create a new custom query of the \u201cSub Query\u201d type and proceed to the query settings.<\/p>\n\n\n\n\"sub\n\n\n\n

As the Parent Object Property<\/strong>, we specify the \u201cextra-activities\u201d property. <\/p>\n\n\n\n

Move on to the Item Schema<\/strong>. <\/p>\n\n\n\n

If the array contains string or numeric values, it is needed to set one single property to store the value. The list of elements will be populated automatically. Therefore, add only one property to the schema and give it a name. Leave the Initial Object Property<\/strong> field empty. <\/p>\n\n\n\n

Save the query by pressing the corresponding button.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

The elements inside the \u2018languages\u2019 array of objects can also be displayed with the help of the Get child element from object\/array<\/strong> callback of the Dynamic Field<\/strong> widget\/block. Therefore, instead of creating a Sub Query<\/strong>, it is possible to display each separate element of the array by placing the Dynamic Field<\/strong> field widget\/block in the main REST API listing template and applying the callback to get array elements. However, to display the \u2018extra-activities\u2019 kind of array, it is highly recommended to use a Sub Query<\/strong>. <\/p><\/div><\/div>\n<\/div><\/div>\n\n\n\n

Create Nested Listings Based on the Sub Queries<\/h2>\n\n\n\n
\n

The next task is to build a nested listing that will output the elements inside our arrays. In the picture below, the \u201cLanguages\u201d and \u201cExtra Activity\u201d items represent nested listings based on sub queries.<\/p>\n\n\n\n\"listing\n\n\n\n

Create the listing template in Elementor<\/h3>\n\n\n\n

To create a new listing, navigate to WordPress Dashboard > JetEngine > Listings<\/em><\/strong>. Click the \u201cAdd New<\/strong>\u201d <\/strong>button to call a Setup Listing Item <\/strong>popup. <\/p>\n\n\n\n

Select \u201cQuery Builder\u201d as the Listing Source <\/strong>and find the previously created Sub Query in the dropdown of custom queries. Give a name to the listing and hit the \u201cCreate Listing Item<\/strong>\u201d <\/strong>button.<\/p>\n\n\n\n\"creating\n\n\n\n

Search for the Dynamic Field<\/strong><\/a> <\/strong>widget and place it on the template. As a Source<\/strong> of the widget, leave the \u201cPost\/Term\/User\/Object Data\u201d option. Then, open the Object Field <\/strong>drop-down and search for the name of your Sub Query. Under the name of the query, there is a list of elements retrieved by the query. Using these elements, build your listing layout.<\/p>\n\n\n\n\"building\n\n\n\n

Don\u2019t worry if you don\u2019t see anything on the preview, as the elements will appear once you place the nested listing inside the primary listing. <\/p>\n\n\n\n

Once done with customizing, save the template by pressing the \u201cPublish\/Update<\/strong>\u201d button.<\/p>\n\n\n\n

Create the listing template in Block Editor (Gutenberg)<\/h3>\n\n\n\n

To create a new listing, navigate to WordPress Dashboard > JetEngine > Listings<\/em><\/strong>. Click the \u201cAdd New<\/strong>\u201d <\/strong>button to call a Setup Listing Item <\/strong>popup. <\/p>\n\n\n\n

Select \u201cQuery Builder\u201d as the Listing Source <\/strong>and find the previously created Sub Query in the drop-down of custom queries. Give a name to the listing, select \u201cBlocks (Gutenberg)\u201d for the Listing View<\/strong>, and hit the \u201cCreate Listing Item<\/strong>\u201d <\/strong>button.<\/p>\n\n\n\n\"creating\n\n\n\n

Search for the Dynamic Field<\/strong><\/a> <\/strong>block and place it on the template. <\/p>\n\n\n\n

As a Source<\/strong> of the widget, leave the \u201cPost\/Term\/User\/Object Data\u201d option. Then, open the Post Object <\/strong>drop-down and search for the name of your Sub Query. Under the name of the query, there is a list of elements retrieved by the query. Using these elements, build your listing layout.<\/p>\n\n\n\n\"building\n\n\n\n

Don\u2019t worry if you don\u2019t see anything on the preview, as the elements will appear once you place the nested listing inside the primary listing. <\/p>\n\n\n\n

Once done with customizing, save the template.<\/p>\n<\/div><\/div>\n\n\n\n

Create the Main Listing to Display the Endpoint Results<\/h2>\n\n\n\n
\n

It is time to build the main listing to showcase the rest of the properties from the REST API endpoint. Add a new listing in <\/span>WordPress Dashboard > JetEngine > Listings<\/span>. As a <\/span>Listing Source<\/span>, select one of the options: \u201cREST API Endpoint\u201d if you <\/span><\/span>didn\u2019t create a REST API query<\/a>; \u201cQuery Builder\u201d if you created a REST API query. <\/span><\/span><\/p>\n\n\n\n\"building\n\n\n\n

The same settings can be applied for the Gutenberg (Block Editor) view.<\/p>\n\n\n\n\"building\n\n\n\n

If the source of the Listing Template <\/strong>is \u201cQuery Builder,\u201d find the name of the custom query in the Object Field <\/strong>drop-down and select any of the fields available. If the field did not appear in the dropdown, specify it manually in the Custom Object field \/ Meta field \/ Repeater key <\/strong>input field.<\/p>\n\n\n\n\"building\n\n\n\n

The same settings are applicable for Block Editor (Gutenberg) view.<\/p>\n\n\n\n\"building\n\n\n\n

Lastly, find the Listing Grid <\/strong>widget\/block and put it on the template. Use it to display the nested listings created previously.<\/p>\n\n\n\n\"displaying\n\n\n\n

Note that it is not necessary to apply the Sub Query in the Custom Query <\/strong>tab of the Listing Grid <\/strong>widget\u2019s\/block\u2019s settings. The listing will still retrieve data from the custom query, which is the source of the Listing Template<\/strong>.<\/p>\n\n\n\n

Once you are finished, navigate to the page or template where the listing with REST API data should be visible and place the main listing on that page. The main listing will contain nested listings that output data from the parent object property.<\/p>\n\n\n\n\"listing\n<\/div><\/div>\n\n\n\n

That\u2019s all about the Sub Query addon available for free as a part of the JetEngine <\/em>plugin for your WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"

The Sub Query addon allows retrieving array elements from a parent object property. Use it to fetch array elements in objects passed in a REST API endpoint and display them conveniently as a nested listing.  Connect to a REST API Endpoint If you haven\u2019t connected to a REST API yet, navigate to WordPress Dashboard > […]<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[405,407],"yoast_head":"\nHow to Display Array Elements from a REST API Endpoint in a Listing \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to display array elements retrieved from a REST API endpoint in a nested listing using the Sub Query addon of the JetEngine plugin for WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display Array Elements from a REST API Endpoint in a Listing \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to display array elements retrieved from a REST API endpoint in a nested listing using the Sub Query addon of the JetEngine plugin for WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-28T13:50:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/05\/array_elements_of_parent_object_in_rest_api_query_2x.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/\",\"name\":\"How to Display Array Elements from a REST API Endpoint in a Listing \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-05-12T08:51:40+00:00\",\"dateModified\":\"2023-07-28T13:50:43+00:00\",\"description\":\"Learn how to display array elements retrieved from a REST API endpoint in a nested listing using the Sub Query addon of the JetEngine plugin for WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Display Array Elements from REST API Endpoint Using Sub Query Addon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Display Array Elements from a REST API Endpoint in a Listing \u2014 JetEngine | Crocoblock","description":"Learn how to display array elements retrieved from a REST API endpoint in a nested listing using the Sub Query addon of the JetEngine plugin for WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/","og_locale":"en_US","og_type":"article","og_title":"How to Display Array Elements from a REST API Endpoint in a Listing \u2014 JetEngine | Crocoblock","og_description":"Learn how to display array elements retrieved from a REST API endpoint in a nested listing using the Sub Query addon of the JetEngine plugin for WordPress.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/","og_site_name":"Help Center","article_modified_time":"2023-07-28T13:50:43+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/05\/array_elements_of_parent_object_in_rest_api_query_2x.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/","name":"How to Display Array Elements from a REST API Endpoint in a Listing \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-05-12T08:51:40+00:00","dateModified":"2023-07-28T13:50:43+00:00","description":"Learn how to display array elements retrieved from a REST API endpoint in a nested listing using the Sub Query addon of the JetEngine plugin for WordPress.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-array-elements-from-a-rest-api-endpoint-using-the-sub-query-addon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Display Array Elements from REST API Endpoint Using Sub Query Addon"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/39798"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=39798"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=39798"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=39798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}