See video version of the tutorial

JSON (JavaScript Object Notation) format was first introduced as a simple way to serialize and stringify objects or arrays to use in javascript snippets. But it turned out to be so convenient that it became wide-spread and used as a standard for different web services. Many online platforms can return data in this format, and it is easy to generate it manually in most programming languages used in the web. wpDataTables supports JSON format as an input data source as well.

In this example we will use a sample JSON file with 100 fake employees data, you can download this file to re-use it via this link.

Let’s see the table first, and then go through the step-by-step tutorial on how to create it.

JSON table example



Please note: if your data set is really large (many thousands of rows) JSON format for creating a wpDataTable would not be a good solution since the page generation time and size would significantly increase. MySQL-based wpDataTables with server-side processing is the best option for large datasets.
When working with JSON format please note: at the moment wpDataTables accepts this and only this format of JSON (see example): a one-level array of same-structured objects where each object will be parsed as a row, and each field inside of the object as a cell. If your software does not return this format you would need to prepare e.g. some PHP adapter to return one of the formats that wpDataTables would accept

Step 1 - Prepare the data source

First you would need to prepare the JSON data source. This includes three simple things:

  1. The data set should not be empty, it should contain at least 1-2 rows.
  2. The returned JSON should exactly follow the format highlighted above: an array of same structured objects, where each object would be parsed as a row, and each object field as a cell.
  3. The JSON should be available via an URL that wpDataTables would be able to access.

In this example we will use a sample JSON data set available by this link. You can copy it and paste it to your new wpDataTable if you would like to follow the steps of this tutorial.

Step 2 - Create a wpDataTable and paste the URL of your JSON data source

Now we need to create a wpDataTable based on the JSON data source that we prepared.

  1. Go to WordPress admin, and open wpDataTables -> Add from Data Source.
  2. Provide some name for the new wpDataTable in the “Table title” input which will help you to identify it.
  3. Choose “JSON file” option in the “Table type” select box.
  4. Paste the URL of your JSON data set to the “Input file or URL” input field.
  5. Press “Save” so that wpDataTables would read the table data and initialize the columns metadata from the provided URL.
json-1
If you get a single column with “No Data” it means that wpDataTables wasn’t able to parse the data set from provided URL. Either it is in wrong format, or just not returning anything.

Step 3 - (Optional) - Define additional settings for the table and columns

By this moment wpDataTable is already created, and basically available to be used, but you might want to define some additional settings for the table in general, or some of its columns. For this table above we defined these additional settings:

  1. Set the “Filter type” for the “Gender” column as “Select box“.
  2. Set the “Filter type” for the “Marital Status” column as “Checkbox“.
  3. Set the “Filter type” for the “Department” column as “Select box“.
JSON output in a table in WordPress post

Step 4 - Insert the wpDataTable in WordPress Post or Page

When all the preparations and configuration is done, you just need to insert the table to your post or page.

  1. Open or create a new post or page.
  2. Put the cursor in the position where you would like to place the wpDataTable.
  3. Click the “Insert wpDataTable” button in the editor.
  4. Locate the wpDataTable that you created in the steps 1-3 and click OK.
  5. Save the post or page and open it in the front-end to see the result.

As an alternative, you can paste the generated wpDataTable shortcode manually.

JSON-based wpDataTable

That is all! Your JSON-based table is all set and ready to use.

Never miss new features!

Join 2000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.

We never spam or disclose your address to anyone.