fetch from an external api call and display results in page

Question

I have placed my external api call inside the functions.php file in the server and I created a shortcode for the api call.

I'm familiar with React and I was expecting Wordpress to be somewhat similar. For example being able to grab the results, loop, and display in a list/component

sendExternalApiCall().then((res) => {
  return (
    res.listOfResults.map((item) => {
      return <div> item.title </div>
    })
  )
})

I've tried googling/watching Youtube videos but most examples of dynamic content are using Custom post types, custom field options, but all this is seemingly still very manual effort and I'm having a hard time piecing together how I can grab my list of results from my api e.g.

results = [{title: 'first post'}, {title: 'second post'}]

loop through those results and render then on the page inside a wordpress widget. Am I able to do this or do I have to create a custom widget? I would love to be able to use existing widgets like elementor but I don't know how to integrate them

Answer 1

Guide to displaying data from an external API in WordPress using a shortcode:

1. Create a Shortcode in functions.php

Create a shortcode in your functions.php file that outputs a container for the results and includes a JavaScript file:

function fetch_external_api_data() {
    wp_enqueue_script('custom-api-fetch-script');
    return '<div id="apiResults"></div>';
}
add_shortcode('external_api_data', 'fetch_external_api_data');

2. Enqueue and Write JavaScript

Create api-fetch.js in your theme directory to fetch and display the data:

function enqueue_custom_scripts() {
    wp_register_script('custom-api-fetch-script', get_template_directory_uri() . '/js/api-fetch.js', array('jquery'), null, true);
    wp_localize_script('custom-api-fetch-script', 'apiSettings', array('apiUrl' => 'URL_OF_YOUR_API'));
    wp_enqueue_script('custom-api-fetch-script');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

In api-fetch.js, use AJAX to get the data and render it:

jQuery(document).ready(function($) {
    $.get(apiSettings.apiUrl, function(data) {
        var content = data.listOfResults.map(item => '<div>' + item.title + '</div>').join('');
        $('#apiResults').html(content);
    });
});

3. Use the Shortcode

Place [external_api_data] in any post, page, or widget to display the API results.

This method uses a JavaScript-based approach to render the API data dynamically on the client side, similar to React, and integrates easily with existing WordPress widgets like those in Elementor via shortcodes.

Answer 2

You can use for example wp_remote_get(), which is part of the WordPress' HTTP API, to call the external API. After receiving the remote response you can pluck the body data from it with wp_remote_retrieve_body() for further handling - e.g. decode json to an array.

If you have a high-traffic site, then for performance reasons, you may want to cache the remote response to a transient for suitable time period instead of calling the api on every page load.

If the remote data doesn't change frequently, then you may even want to push the remote call to a scheduled cron action to make the call in the background. In this case the flow could be something like this,

1. Scheduled cron action calls the remote API
2. Remote response is cached into a transient
3. Shortcode/WP widget/dynamic block/Elementor widget is used to read the transient and render the data