Format API data into HTML

If using the shortcode to output your API data, this data can be formatted into HTML by using the ‘format’ attribute in the shortcode. There are also a few other attributes that we can add to help customise the output of the HTML.

Note: because of the dynamic nature of API’s and the individuality of each API, this feature may not be suitable to every API. Also, this feature does not keep any arrays within the data nested, it will ‘flatten’ all the data so that each item is all on the same top level.

Endpoint settings

Firstly you need to set up your API and your endpoint – you can follow our Quick Start Guide.

When setting this up, ensure that within the endpoint settings you have the Results Format set to PHP array data.

Shortcode attributes

There are 3 shortcode attributes that will affect the HTML output.

• (Required) ‘format’ attribute needs to be set to html
• (Optional) ‘html_tag’ can be set to div, li or span – this sets the HTML tag that each item will be wrapped in. Default is div.
• (Optional) ‘html_labels’ – can be set to true or false – this will take the key of each item and add it in front of the value for each item. Default is false.

[wpgetapi_endpoint api_id='quotable' endpoint_id='random' format='html' html_tag='div' html_labels='false']

The HTML output

The output of a standard JSON API might look something like in the image below.

Using the format=’html’ attribute, our output will now look something like in this image:

This looks a little better but it still doesn’t look amazing. However, when we look at the source code of our new little piece of formatted data, this is when we can start to see how this could be used to make things look a bit prettier. If you know CSS, then you can make this formatted data look anyway you want to. You will notice that CSS classes are automatically created by using the keys as the class names (prefixed with wpgetapi_).

Styling with CSS

Our output from above can now be easily styled using CSS. This is the result:

And this is the CSS that was used:

.wpgetapi__id,
.wpgetapi_0,
.wpgetapi_authorSlug,
.wpgetapi_length,
.wpgetapi_dateModified {
    display: none;
}
.wpgetapi_html {
    border: 1px solid #d7d7d7;
    padding: 20px 30px 24px 22px;
    border-radius: 10px;
    box-shadow: 7px 7px 0 #ccc;
}
.wpgetapi_content {
    font-style: italic;
    margin: 15px 0;
    font-size: 20px;
    color: #3f57cc;
}
.wpgetapi_content::before,
.wpgetapi_content::after {
    color: #cdcdcd;
    line-height: 0;
    vertical-align: middle;
}
.wpgetapi_content::before {
    content: '\201C';
    font-size: 69px;
    margin-right: 5px;
}
.wpgetapi_content::after {
    content: '\201D';
    font-size: 60px; 
}
.wpgetapi_author {
    margin-left: 38px;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    color: #040404;
}
.wpgetapi_dateAdded {
    display: inline-block;
    font-size: 14px;
    margin-left: 12px;
    color: #888;
}

Optional shortcode attributes

We haven’t yet touched on how to use the 2 optional shortcode attributes: html_tag and html_labels

html_tag attribute

The html_tag attribute can take in 3 different options which will affect the output of our HTML. The 3 options available are div, li and span. Here is the result of setting this to html_tag=’li’

html_labels attribute

Setting the html_labels attribute to true – html_labels=’true’ – will attempt to add the keys as labels. The label will be wrapped within a span tag and will be output as shown in the images below:

This option will also apply some formatting to the keys so that camelCaseKeys and also keys_with_underscores or keys-with-dashes will be formatted so that they look more like this: Camel Case