Format API to HTML Table

No code method

The simplest (and no code) method for creating an HTML table from your API data is to use the wpDataTables plugin. We have an article on how to create tables from API data using wpDataTables.

Code method

If you’d like to code up a simple table yourself, then read on.

This article will show you how to format your API data and display it within a HTML table.
The examples we use in this article are real world examples so you can actually set this up on your own site and test it out. We are using the Quotable API which can be found here.

Add the API

The first step is to add a new API within the Setup page.

Add the endpoint

We are using the ‘quotes’ endpoint which returns a big list of quotes – https://github.com/lukePeavey/quotable#list-quotes

When setting up your endpoint, the main thing to be sure of is that the Results Format setting is set to PHP array data as this will return the data in an array format that can be used easily in our page template.

We have also set the limit to 5 which tells the API to only get us 5 quotes. We have also set the cache time to 60 seconds just to avoid hitting the API too often.

Writing the code

The code to fetch our data and display it in a table is fairly straightforward:

• Copy the template tag from the endpoint (as shown above)
• Store the results in the $data variable
• Loop through the results and put the results into a table

$data = wpgetapi_endpoint( 'quotable', 'quotes', array('debug' => false) );

// prints out our raw data
// delete or comment this out when not required
wpgetapi_pp($data); ?>

<table class="table table-bordered">
    <thead>
        <tr>
            <th scope="col">Author</th>
            <th scope="col">Quote</th>
            <th scope="col">Length</th>
        </tr>
    </thead>
    <tbody>

    <?php 
    // ensure we have the correct data
    if( isset( $data['results'] ) && is_array( $data['results'] ) ) {

        // loop through each item in the results array
        foreach ( $data['results'] as $i => $item ) : ?>
            
            <tr>
                <td><?php esc_html_e( $item['author'] ); ?></td>
                <td><?php esc_html_e( $item['content'] ); ?></td>
                <td><?php esc_html_e( $item['length'] ); ?></td>
            </tr>
            
        <?php endforeach;

        } else { ?>

            <tr>
                <td colspan="4">No quotes were found.</td>
            </tr>

        <?php } ?>

    </tbody>
</table>

Where to put the code

The code snippet can be added in a couple of different ways.

• Easiest: Use a code snippets plugin
• Advanced: Create a page template and add the code directly within the template

Using a code snippet plugin

The best snippet plugin we have found is this one – https://wordpress.org/plugins/code-snippets/

This plugin allows you to create a code snippet and then you can insert this snippet into your page as a shortcode, essentially turning any PHP code into a shortcode. We aren’t affiliated with this plugin in any way, but we have tested it and it works great as a way to insert PHP code.

Creating a page template

1. Create a new page within WordPress called Testing
2. Create a PHP file using a text editor and name it page-testing.php and copy the code below into this file (note that the code below includes the get_header and get_footer functions which is required for the page template)
3. Upload this page-testing.php file to your current WordPress theme. It should sit in the root folder of the theme
4. You should now see a table with the countries when viewing the new Testing page

<?php get_header();

$data = wpgetapi_endpoint( 'quotable', 'quotes', array('debug' => false) );

// prints out our raw data
// delete or comment this out when not required
wpgetapi_pp($data); ?>

<table class="table table-bordered">
    <thead>
        <tr>
            <th scope="col">Author</th>
            <th scope="col">Quote</th>
            <th scope="col">Length</th>
        </tr>
    </thead>
    <tbody>

    <?php 
    // ensure we have the correct data
    if( isset( $data['results'] ) && is_array( $data['results'] ) ) {

        // loop through each item in the results array
        foreach ( $data['results'] as $i => $item ) : ?>
            
            <tr>
                <td><?php esc_html_e( $item['author'] ); ?></td>
                <td><?php esc_html_e( $item['content'] ); ?></td>
                <td><?php esc_html_e( $item['length'] ); ?></td>
            </tr>
            
        <?php endforeach;

        } else { ?>

            <tr>
                <td colspan="4">No quotes were found.</td>
            </tr>

        <?php } ?>

    </tbody>
</table>

<?php get_footer();