Skip to Main
View .mdAsk ClaudeAsk ChatGPT

Displaying API Data on Your Site

What you’ll build

In 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 HuxxConnect: "api_id" attribute is required. shortcode, then a single product title, then several values at once, and finally the same data rendered as an HTML list from PHP.

Before you start

You need:

  • The Demo API from 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:

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

{
    "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.

New to APIs? Read this first

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.

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:

Output on the page:

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:

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

{
    "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
$titles = huxx_api( 'demo_api', 'get_products', array(
    'keys' => 'products.[].title',
) );

$titles is now:

[
    "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.

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
// 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:

• 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 HuxxConnect: "api_id" attribute is required. / HuxxConnect: "api_id" attribute is required. are shortcode aliases — all covered in the template functions reference.

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 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 guide walks through both.

Where next