The WP-API team got the documentation updated, so be sure to check this post out before you modifying the JSON response. (Thanks PDuran for this.)
Since I started the series about building themes with AngularJS and WP REST API, I got asked lots of questions that sometimes they were involved more with AngularJS, and sometimes they were more concerned with WP REST API.
To be honest, I prefer WP REST API related questions because they usually take less time for me to solve. After all, I’m quite new to AngularJS so before answering each question I’ll do some research to make sure my answer will be backed up.
Most questions related to WP REST API can be solved by manipulating data in the JSON response. Yes, though the post title might imply the “adding” part, we can also “update” or “remove” fields (data) with the same approach. Let’s get started.
Scenario one: get the categories and their posts in a single API request
David asked this question that he wanted to build an accordion menu with categories as the first level links, which when being clicked, the posts would be collapsed as the second level links.
When we call the WP REST API with a route like “wp-json/taxonomies/category/terms/1“, we’ll get the JSON response with all information about the term (category) object.
We can also get the posts in a single category by calling “wp-json/posts/?filter[category_name]=uncategorized“, but that would be very inefficiency that if we have five categories, we’ll have five extra API calls.
The ideal solution for me is we should include the latest 3 or 5 posts to the JSON response, that can save us from those extra calls. Here’s the gist for such task, you’ll need to insert it to the functions.php:
Please note at line 5-8 is for preventing the posts being added every time the term route is called. For example, when calling terms or even posts routes, they’ll call for a single term too, and the latest five posts will also be added to the JSON response, which might be useless in those cases. But if that’s exactly what you want, just comment out these lines.
After that, when calling the “wp-json/taxonomies/category/terms/1” route, you’ll get an advanced JSON response like the image below. You can see the latest posts in the category are included.
Scenario two: add featured image thumbnail URL to wp-json/wp/v2/posts route
The other question is asked by Dominic, that he’s interested in how to get featured image thumbnail URL, that in the next version (v2.0) of WP API, the route “wp-json/wp/v2/posts” will return only the featured image ID, but not the image URLs.
In this scenario, we know that we could access the feature image object with an route like “wp-json/wp/v2/media/45“, but as the previous example, doing so will cost us more API calls so it would be great that we just add the the thumbnail URL back to the JSON response. Here’s a gist does the trick:
From the gist above you can see that we use the filter “rest_prepare_post” to manipulate the JSON data. It’s really simple and straight forward that I add a new key “featured_image_thumbnail_url” to the $data->data array, and set it to the thumbnail url.
With such a simple tweak, extra API calls are saved and we can use “{{post.featured_image_thumbnail_url}}” in our AngularJS template for the post thumbnail.
Scenario three: removing fields we don’t need from the JSON response
Let’s say from the scenario two, we think the “featured_image” only contents an ID so it’s useless to us. We can remove it with a PHP unset function (at line 11):
And of course, the better solution in this case should be, just resetting the value of $_data['featured_image'] (at line 9):
Be sure to check out the WP API develop branch
The WP API repository on GitHub now set the default branch to the develop branch, which is the version 2.0. Be sure to spend some time with it if you’re serious about building a WordPress app in the near future.
I’ll also update all the tutorials in the building themes with AngularJS and WP REST API series when the v2.0 comes out. (The AngularJS 2.0 will aslo be out this summer. What a coincidence.) See you in my next post!
Leave a Reply