Where would I put my call to wp_remote_get?

Question

I have a sidebar is supposed to loop through a bunch of job postings that are fetched from a GET request. The resulting HTML should look like this:

<div>
  <h4 class="myapp-sidebar-heaader">Related Positions</h4>
  <div>
    <a href="#" class="myapp-related-job-link">
      <h5 class="myapp-job-title">Job title really really long</h5>
      <h5 class="myapp-job-location">Location</h5>
    </a>
    <a href="#" class="myapp-related-job-link">
      <h5 class="myapp-job-title">Job title really really long</h5>
      <h5 class="myapp-job-location">Location</h5>
    </a>
  </div>
</div>

Let's say for now that the API URL is https://jsonplaceholder.typicode.com/todos.

I found wp_remote_get ( https://developer.wordpress.org/reference/functions/wp_remote_get/ ) but I'm not sure where I put it. Should I just put it in the view file?

I'm guessing I should make a function that:

1. Calls wp_remote_get("https://jsonplaceholder.typicode.com/todos")
2. Returns the array of job posting objects

in functions.php, but I'm not sure how I would export it so it would be available in the view.

Answer 1

I'm guessing I should make a function that:

• Calls wp_remote_get("https://jsonplaceholder.typicode.com/todos")
• Returns the array of job posting objects

Yes, that still leaves the question of where to call it

in functions.php, but I'm not sure how I would export it so it would be available in the view.

Functions in functions.php are available in templates, making it available in the view isn't an issue if you're using WordPress theme templates correctly

As for where you would call this function? In the place you want to display it. However, there are downsides to your approach:

• Doing a remote request in PHP to another server on the frontvend is one of the worst things you can do for performance and scalability
• If it's just a remote GET request with no authentication, you can do that in JS

Doing it in javascript instead would shift the work to the browser, and make page caching better as it wouldn't cache stale results.

So you could do something like this in javascript:

fetch('https://jsonplaceholder.typicode.com/todos')
    .then(function(response) {
        return response.json(); // decode the JSON
    })
    .then(function(json) {
        // create a container dom node, and fill it with todo items
        const container = jQuery('<div>', { id: "todos"
        const todos = json.map( todo =>
            jQuery( '<p></p>', text: todo.title)
        );
        container.append( todos );
        // add it to the page inside a div with an ID, we're adding it all at once for performance reasons
        jQuery('#sidebartodos').append( container );
    });