Understanding the 'data' Shortcode with the Remote Content Widget

The 'data' shortcode is a powerful feature available in the Dynamic HTML setting of the Remote Content widget on Dynamic Content for Elementor version 3.0 or higher. It allows for direct integration and manipulation of data fetched from external APIs or other sources into your Elementor pages.

Availability and Functionality

The 'data' shortcode is specifically designed for use in the "Dynamic HTML" field of the Remote Content widget. This setting is crucial for rendering data fetched from remote endpoints directly into your Elementor project. Other widget settings do not support the 'data' shortcode, underscoring its specialized role in dynamic content display.

Using the 'data' Shortcode in Remote Content Widget

{data:result}: This shortcode is automatically populated with the data returned by the specified endpoint in the Remote Content widget. The data must be in JSON format, which is common for most REST APIs.
- Usage with dump filter: {data:result|dump} is used to perform a dump of the result, providing a visual representation of the data structure. This is helpful for understanding the data's format and for debugging purposes.
- Accessing Specific Data Points: If the API returns structured data, such as JSON, you can access specific elements of the data using a double pipe || followed by the key name. For example, {data:result||message} would access the message field of the JSON object.

Practical Example: Fetching and Displaying API Data

Let's consider the API endpoint https://dog.ceo/api/breeds/image/random which returns a random dog image URL in the following JSON format:

{
   "message": "https://images.dog.ceo/breeds/terrier-fox/n02095314_3054.jpg", 
   "status": "success" 
}

To display the image returned by the API using the Remote Content widget, you can set up the Dynamic HTML field with an image tag like so:

<img src="{data:result||message}" />

This uses the message part of the JSON result to dynamically source the image URL each time the page loads.

How to use `for` to cycle the `{data:result}`

In the example using the API https://jsonplaceholder.typicode.com/users, you can cycle through the returned array of user objects using the for shortcode. This is particularly useful for dynamically rendering lists of user data directly within Elementor pages using the Remote Content widget.

Example Usage

<ul>
{for:user {data:result}
   [<li> <strong>Name:</strong> {get:user||name}<br> 
   <strong>Email:</strong>{get:user||email}<br>
   <strong>City:</strong> {get:user||address||city}<br> 
   <strong>Company:</strong> {get:user||company||name} 
   </li> ] 
} 
</ul>

Explanation of the Syntax

Loop Initialization: {for:user {data:result} starts the loop, where user is the placeholder for each item in the {data:result} array, representing an individual user object.
Template for Each Iteration: The square brackets [...] enclose the template to be repeated for each iteration. Within this template, you use {get:user||property} to access properties of the current user object:
- {get:user||name} accesses the name property.
- {get:user||email} accesses the email property.
- {get:user||address||city} accesses the city within the nested address object.
- {get:user||company||name} accesses the company's name.
End of Loop: The loop automatically ends after iterating over all items in the array provided by {data:result}.

How to Use Dynamic Shortcodes in Dynamic Content for Elementor

How to Use the 'data' Dynamic Shortcode in Dynamic Content for Elementor

Using the 'data' Dynamic Shortcode in the ACF Repeater Widget

Using the 'data' Shortcode in the ACF Flexible Content Widget