---
title: "Display Data with Shortcodes"
slug: display-data-with-shortcodes
type: how-to
plugin: huxx-connect
summary: "Recipes for the [huxx_api] shortcode: pull single values with keys, pass runtime variables, trigger requests silently, and hand output to Pro HTML formatting."
keywords: [shortcode, display, keys, format, endpoint variables]
version_added: 1.2.5
version_updated: 1.2.5
level: intermediate
related: [extract-values-with-keys, shortcodes, use-template-functions, cache-endpoint-responses]
---

This page collects the shortcode patterns you reach for most often. Every recipe assumes the standing demo configuration: an API with the id `demo_api` (base URL `https://dummyjson.com`) and a GET [endpoint](/docs/connect/explanation/glossary/#endpoint) with the id `get_products` (path `/products`). A few recipes add two more endpoints to that same API — `product_detail` (GET `/products/{0}`) and `add_product` (POST `/products/add`). Full attribute-by-attribute detail lives in the [Shortcode Reference](/docs/connect/reference/shortcodes/).

> **Quick version:**
>
> ```
> [huxx_api api_id="demo_api" endpoint_id="get_products"]                          → full response as JSON
> [huxx_api api_id="demo_api" endpoint_id="get_products" keys="products.0.title"]  → one value
> [huxx_api api_id="demo_api" endpoint_id="get_products" query_variables="limit=2,skip=10"]
> [huxx_api api_id="demo_api" endpoint_id="product_detail" endpoint_variables="1"]
> [huxx_api api_id="demo_api" endpoint_id="get_products" format="no_display"]      → run, render nothing
> ```
>
> `[huxx_connect_api]` and `[huxx_connect]` are aliases of `[huxx_api]` with identical attributes.
>
> For one value per item, the `[]` wildcard is PHP-only: `huxx_api( 'demo_api', 'get_products', array( 'keys' => 'products.[].title' ) )`. It cannot go in a shortcode attribute — WordPress ends the shortcode at the first `]`.

## Display a full response

The minimal shortcode calls the endpoint and renders the decoded response as pretty-printed JSON inside a `<pre class="huxx-connect-response">` block.

Shortcode:

```
[huxx_api api_id="demo_api" endpoint_id="get_products"]
```

PHP:

```php
<?php
$data = huxx_api( 'demo_api', 'get_products' );
if ( ! huxx_api_is_error( $data ) ) {
    echo '<pre>' . esc_html( wp_json_encode( $data, JSON_PRETTY_PRINT ) ) . '</pre>';
}
```

Output (truncated):

```json
{
    "products": [
        {
            "id": 1,
            "title": "Essence Mascara Lash Princess",
            "category": "beauty",
            "price": 9.99
        }
    ],
    "total": 194,
    "skip": 0,
    "limit": 30
}
```

Rendering raw JSON is a diagnostic step, not a finished page — once the connection works, narrow the output with `keys` (next recipe) or format it with the Pro attributes (last recipe).

<details>
<summary><strong>New to APIs? Read this first</strong></summary>

An API response usually arrives as JSON — nested lists and labeled values. The recipes below pick individual values out of that structure. The [Displaying API Data](/docs/connect/tutorial/displaying-api-data/) tutorial walks through this from the beginning.

</details>

## Display a single value

The `keys` attribute walks into the response with a dot-separated path. `products.0.title` means: the `products` list, its first item (`0`), that item's `title`.

Shortcode:

```
[huxx_api api_id="demo_api" endpoint_id="get_products" keys="products.0.title"]
```

PHP:

```php
<?php
$title = huxx_api( 'demo_api', 'get_products', array( 'keys' => 'products.0.title' ) );
if ( ! huxx_api_is_error( $title ) ) {
    echo esc_html( $title );
}
```

Output:

```html
<pre class="huxx-connect-response">Essence Mascara Lash Princess</pre>
```

To pull several values at once, wrap each path in braces: `keys="{products.0.title},{products.0.price}"` returns both, keyed by their full paths. The full syntax — including the PHP-only `[]` wildcard that extracts a value from every list item — is worked through in [Extract Values with the keys Syntax](/docs/connect/how-to/extract-values-with-keys/).

## Pass a path variable at render time

When an endpoint path contains a [path variable](/docs/connect/how-to/use-path-variables/) — for example a `product_detail` endpoint with the path `/products/{0}` — supply the value with `endpoint_variables`.

Shortcode (indexed variables, comma-separated in path order):

```
[huxx_api api_id="demo_api" endpoint_id="product_detail" endpoint_variables="1"]
```

For named variables (path `/products/{product_id}`), use `key=value` pairs:

```
[huxx_api api_id="demo_api" endpoint_id="product_detail" endpoint_variables="product_id=1"]
```

PHP:

```php
<?php
$product = huxx_api( 'demo_api', 'product_detail', array(
    'endpoint_variables' => array( 1 ),
) );
```

Output (truncated):

```json
{
    "id": 1,
    "title": "Essence Mascara Lash Princess",
    "price": 9.99
}
```

The format is auto-detected: if any segment contains `=`, the whole string is treated as named pairs; otherwise the values map by position.

## Override query and body parameters

`query_variables` merges `key=value` pairs on top of the parameters saved in the endpoint configuration — runtime values win.

```
[huxx_api api_id="demo_api" endpoint_id="get_products" query_variables="limit=2,skip=10"]
```

Output (truncated):

```json
{
    "products": [
        { "id": 11, "title": "Annibale Colombo Bed" },
        { "id": 12, "title": "Annibale Colombo Sofa" }
    ],
    "total": 194,
    "skip": 10,
    "limit": 2
}
```

Because the parser splits pairs on commas, a value itself cannot contain a comma — use the [template function](/docs/connect/how-to/use-template-functions/) for complex values.

For POST endpoints, `body_json` accepts a complete JSON object (use single quotes around the attribute so the inner double quotes survive):

```
[huxx_api api_id="demo_api" endpoint_id="add_product" body_json='{"title": "Coffee Mug"}']
```

Output:

```json
{
    "id": 195,
    "title": "Coffee Mug"
}
```

`body_json` takes precedence over `body_variables` when both are set. See [Send Query, Header, and Body Parameters](/docs/connect/how-to/send-query-header-and-body-parameters/) for how runtime values merge with the saved configuration.

## Run a request without rendering anything

`format="no_display"` executes the request and returns an empty string. Use it when the side effect is the point — for example, notifying an external system when a page is viewed.

```
[huxx_api api_id="demo_api" endpoint_id="add_product" body_json='{"title": "Page viewed"}' format="no_display"]
```

Output: nothing is rendered. The request still appears in the request log (see [Debug API Requests](/docs/connect/how-to/debug-api-requests/)).

## Show errors while you build

By default a failed request renders nothing, so a broken page stays clean for site visitors. While building, set `debug="true"` to render the error details instead. Debug output is capability-gated: it renders only for logged-in users with the `manage_huxx_connect` capability (administrators, by default). Everyone else still sees nothing, even with `debug="true"` in place.

```
[huxx_api api_id="demo_api" endpoint_id="get_products" debug="true"]
```

Output when the request fails (example — endpoint id misspelled), rendered inside `<pre class="huxx-connect-error">` for a logged-in administrator:

```json
{
    "_huxx_connect_error": true,
    "code": 0,
    "message": "Endpoint "get_prodcuts" not found for API "demo_api".",
    "original_response": null,
    "context": {
        "api_id": "demo_api",
        "endpoint_id": "get_prodcuts"
    }
}
```

One exception to the capability gate: when the HTTP request itself fails (a timeout, an error status from the API server), the executor's debug mode converts the error to a plain array before the shortcode sees it, and that array renders as JSON for every visitor. Remove `debug="true"` once the page works.

## Format output as HTML (Pro)

With HuxxConnect Pro active, `format="html"` renders an array response as nested HTML elements instead of JSON, controlled by the `html_*` and `img_*` attributes:

```
[huxx_api api_id="demo_api" endpoint_id="product_detail" endpoint_variables="1" keys="{title},{price}" format="html" html_tag="li" html_labels="true"]
```

Output (whitespace added for readability):

```html
<ul class="huxx-connect-html huxx-connect-outer-wrap">
    <li class="huxx-connect-title"><span class="huxx-connect-label">Title</span> Essence Mascara Lash Princess</li>
    <li class="huxx-connect-price"><span class="huxx-connect-label">Price</span> 9.99</li>
</ul>
```

Pro also provides `format="number_format(2)"` to render a numeric result with a fixed number of decimals. The full attribute list is in the [Shortcode Reference](/docs/connect/reference/shortcodes/).

## If it didn't work

- **The page shows `HuxxConnect: "api_id" attribute is required.`** (or the `endpoint_id` variant) — the attribute is missing or misspelled. Both `api_id` and `endpoint_id` are required; check them against the ids shown on the API detail screen.
- **Nothing renders at all.** The request failed and `debug` is off. Add `debug="true"` and view the page while logged in with the `manage_huxx_connect` capability to see the error, or open the request log — [Debug API Requests](/docs/connect/how-to/debug-api-requests/) shows where to look.
- **`keys` renders `null`.** The path doesn't match the response structure. Render the full response first (drop `keys`), read the real structure, then rebuild the path — [Extract Values with the keys Syntax](/docs/connect/how-to/extract-values-with-keys/) covers the rules.