---
title: Displaying API Data on Your Site
slug: displaying-api-data
type: tutorial
plugin: huxx-connect
summary: Put live API data on a WordPress page — render DummyJSON products with the [huxx_api] shortcode, extract single values with keys, then do the same in PHP.
keywords: [shortcode, huxx_api, display data, keys, dot notation, php]
version_added: 1.2.5
version_updated: 1.2.5
level: beginner
related: [your-first-api-connection, display-data-with-shortcodes, extract-values-with-keys, shortcodes, template-functions, keys-syntax]
---

# Displaying API Data on Your Site

## What you'll build

In [Your First API Connection](/docs/connect/tutorial/your-first-api-connection/) you connected to DummyJSON and watched live JSON arrive in the test panel. Now you'll put that data in front of site visitors: first the raw response on a page via the `[huxx_api]` shortcode, then a single product title, then several values at once, and finally the same data rendered as an HTML list from PHP.

<!-- screenshot-todo: frontend-page--rendered--product-list | alt: Published WordPress page showing three DummyJSON product titles and prices rendered as a list -->

## Before you start

You need:

- The **Demo API** from [Your First API Connection](/docs/connect/tutorial/your-first-api-connection/) — API ID `demo_api`, endpoint ID `get_products`, path `/products` with the query parameter `limit=3`. If you skipped that tutorial, do it first; every example here uses that exact setup.
- A page or post you can edit.
- For the PHP step only: access to your theme's template files (a child theme or a code snippets plugin works).

## Step 1: Drop the shortcode on a page

The fastest way to get the shortcode is to copy it from the plugin: on the API detail page, every endpoint row has an **SC** button that copies a ready-made shortcode to your clipboard. Or just type it.

Edit any page, add a **Shortcode** block, and paste:

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

Preview the page. HuxxConnect calls the endpoint and, because the response is an array, renders it as pretty-printed JSON:

```text
{
    "products": [
        {
            "id": 1,
            "title": "Essence Mascara Lash Princess",
            "price": 9.99
        },
        ...
    ],
    "total": 194,
    "skip": 0,
    "limit": 3
}
```

(Product fields trimmed for readability.) A wall of JSON isn't what you'd show visitors — but it proves the pipeline works, and it shows you the paths you need for the next step.

:::novice
The response is *nested*: the list of products sits inside a `products` key, each product is a numbered item in that list, and each item has fields like `title`. "Keys" are how you point at one spot in that nesting — see the [keys syntax reference](/docs/connect/reference/keys-syntax/).
:::

## Step 2: Extract one value with `keys`

Add the `keys` attribute to pull out a single value using a dot-separated path — each dot steps one level deeper:

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

Output on the page:

```text
Essence Mascara Lash Princess
```

Reading the path left to right: `products` (the list) → `0` (the first item — counting starts at zero) → `title` (that item's title field).

You can also wrap the path in braces — `keys="{products.0.title}"` — which does the same thing. Braces are the preferred syntax once you request more than one value (covered next), though a bare comma-separated list (`keys="products.0.title,products.0.price"`) works too.

## Step 3: Extract several values at once

Comma-separate multiple brace-wrapped paths:

```text
[huxx_api api_id="demo_api" endpoint_id="get_products" keys="{products.0.title},{products.0.price}"]
```

With two or more paths, the result is an array keyed by each full path, rendered as JSON:

```text
{
    "products.0.title": "Essence Mascara Lash Princess",
    "products.0.price": 9.99
}
```

And to grab the same field from *every* product, use the `[]` wildcard, which fans out across all items in a list. Wildcards work through the PHP `huxx_api()` function (introduced fully in Step 4):

```php
<?php
$titles = huxx_api( 'demo_api', 'get_products', array(
    'keys' => 'products.[].title',
) );
```

`$titles` is now:

```text
[
    "Essence Mascara Lash Princess",
    "Eyeshadow Palette with Mirror",
    "Powder Canister"
]
```

> **Warning:** the `[]` wildcard cannot be used inside a shortcode attribute. WordPress ends a shortcode at the first `]` it finds, so `keys="products.[].title"` cuts the tag off mid-attribute and the keys path is never applied. For wildcard paths, use the PHP `huxx_api()` function.

The full path syntax — braces, wildcards, and how multi-key results are shaped — is documented in the [keys syntax reference](/docs/connect/reference/keys-syntax/).

## Step 4: The same data from PHP

Shortcodes render JSON; for real markup you use PHP. The `huxx_api()` function takes the same API ID and endpoint ID, plus an optional arguments array — `keys` goes in there:

```php
<?php
// In a theme template (e.g. page.php) or a code snippet.
$products = huxx_api( 'demo_api', 'get_products', array(
    'keys' => 'products',
) );

if ( huxx_api_is_error( $products ) ) {
    $error = huxx_api_get_error( $products );
    echo esc_html( 'Products unavailable: ' . $error['message'] );
} else {
    echo '<ul>';
    foreach ( $products as $product ) {
        echo '<li>' . esc_html( $product['title'] ) . ' — $' . esc_html( $product['price'] ) . '</li>';
    }
    echo '</ul>';
}
```

Rendered output:

```text
• Essence Mascara Lash Princess — $9.99
• Eyeshadow Palette with Mirror — $19.99
• Powder Canister — $14.99
```

Three things to note:

- `keys => 'products'` unwraps the response so the loop iterates the product list directly, skipping the `total`/`skip`/`limit` wrapper.
- Always check for errors before using the result. `huxx_api()` returns the data on success, an error object on failure, or `false` when the IDs are empty — `huxx_api_is_error()` handles the check, and `huxx_api_get_error()` returns the details (`message`, `code`, plus the raw `original_response` and `context`).
- Escape everything you print. API data is external input — `esc_html()` is not optional.

Every endpoint row also has a **PHP** button that copies a ready-made `huxx_api()` call, the same way **SC** copies the shortcode. If you prefer longer names, `huxx_connect_api()`, `huxx_connect_is_error()`, and `huxx_connect_get_error()` are identical, and `[huxx_connect_api]` / `[huxx_connect]` are shortcode aliases — all covered in the [template functions reference](/docs/connect/reference/template-functions/).

## What just happened

The shortcode and the PHP function are two doors into the same engine that powered **Run Test** in the first tutorial: HuxxConnect executed the saved `get_products` configuration, decoded the JSON, then applied your `keys` path to carve out the piece you asked for.

The default renderings are deliberately conservative: both array and string results render inside a `<pre class="huxx-connect-response">` block by default — arrays as pretty-printed JSON, strings escaped before output — so a compromised or malicious API response can't inject HTML into your page. Producing styled markup is your job in PHP (as in Step 4) — or via the [display data with shortcodes](/docs/connect/how-to/display-data-with-shortcodes/) guide, which covers the shortcode's formatting options.

## If it didn't work

**The shortcode text appears on the page, brackets and all.** WordPress isn't parsing it. Make sure it's in a Shortcode block (or a paragraph — not a code block, which prints text literally) and that HuxxConnect is active on this site.

**You see `HuxxConnect: "api_id" attribute is required.` (or the same for `endpoint_id`).** The attribute name is misspelled or missing — it's `api_id` with an underscore, not `api-id`. Check both attributes against the values on the API detail page.

**The page renders nothing where the shortcode should be.** The request failed. Errors are hidden from site visitors by design. Add `debug="true"` to the shortcode and view the page while logged in as an administrator to see the error details, or check **HuxxConnect → Logs**. The [Debug API requests](/docs/connect/how-to/debug-api-requests/) guide walks through both.

## Where next

- **New to APIs?** Responses you display on every page view shouldn't hit the API every time — read [Cache endpoint responses](/docs/connect/how-to/cache-endpoint-responses/) to serve saved copies instead.
- **Developer?** The [keys syntax reference](/docs/connect/reference/keys-syntax/) and [template functions reference](/docs/connect/reference/template-functions/) document every path form and runtime argument, including `query_variables`, `endpoint_variables`, and cache overrides.