Working with JSON

This week I wanted to talk a bit about JSON and how powerful it can be for developers. JSON played a big role in the creation of my very first plugin. Short for Javascript Object Notation, JSON has flexibility and a relative easy-to-learn format that can really help make working with complicated data structures easier for developers.

Typically you’ll see JSON used as the data format for sending back end data to a script on the front end and for responses from external APIs. In the case of my plugin, I wanted to display my “badges” that I earned from an online learning site. These badges, as well as pretty much every other piece of data tied to my account, are available in JSON format on this online learning site via their API. I can see data from every single course I have completed since I began using the site almost 2 years ago. I easily found the names of the courses, the dates I completed them, as well as the urls of both the courses themselves and the badge images tied to each course.

First I wrote a function to pull the JSON I needed from the site’s API:

This function simply returns the data from the API in JSON format. Notice how the $wp_username variable gets passed in so that any user’s info can be returned, if it exists. I’m also running the JSON through PHP’s json_decode() function before returning it, which will turn it into a standard PHP object that I can access just like any other object in PHP. This will come in handy throughout the process.

Here is a small sample piece of the raw JSON returned by the function:

First, notice how “badges” is a nested array. All of the data related to badges is in this array. I can easily filter through the data and get only the pieces I want by interacting with the PHP object returned by my function above:

Here I’m using count( $wp_profile->badges ) to get the number of total badges attached to my account. I want to display my most recent badges first and they are returned oldest first from the API, so I count the total number of badges and then use a for loop that decrements on each interation to build my output starting with the most recent badge. This loop could continue all the way down until my very first badge, or I can stop after a specific number.


From here, we can begin isolating the individual pieces of data that we want to display. Notice that every piece of data we need must start at the highest level of the JSON tree, stored in the $wp_profile variable. We then use the “->” symbol to move one level down into “badges”. We continue to use this symbol down through the levels of arrays, getting more specific until we get what we need. The curly brackets hold the specific names of the data we are looking for , including “badges”, “name”, “courses”, “title”, “url”, and “icon_url”. See the text block above to look at this code in action. Now that we have our data, all we need to do is wrap it in html markup. Now we are free to style and arrange this data as needed.


Obviously there is still plenty of work left to do to get a fully functioning plugin. However, the flexibility and simplicity of using JSON moves things along tremendously. This was a simple example showing the potential power of JSON, and the possibilities are endless! Hopefully you found this piece informative, and that it inspires you to jump into JSON for your own development. Good luck!