This article will show how easy it is to convert a JSON API to a Table – or convert a JSON file to a Table, without writing any code.
API Widgets allows you to create Tables from API data, or to use your own JSON file. In either case, the process for creating a Table is the same.
To create a Table, the first step is to create a new Widget which connects your API (or JSON file) with API Widgets. We can then start to configure which data the Table will use and setup some styling options to get the Table looking the way we need.
Selecting JSON data to use in the Table
After creating the Widget, you will see the Preview Tab and the JSON data from the API (or file) will be displayed in the side tab.
Click on one of the yellow highlighted nodes within the JSON data, and all data (nested data included) within that node will be used within the Table.
If the data within the node contains items you don’t need to use in the Table, you can easily turn these off in the next steps.
Depending on the JSON data or API being used, you may want to use the entire data or just a small section of the data.
Building the Table
For this example, we selected the first array after the response key as this contains all the data that we required. With the data selected & highlighted, you can now click the Build Table button and the table will be created from the selected JSON data.
Customizing the Table
The Table contains a bunch of rows that we don’t want, a bunch of columns that we don’t want and we can also turn the team logo image URL’s into actual images.
Here is the full Table after clicking the Build Table button.
Filtering Rows
The first thing we will do is go into the Rows Tab and we can filter out the rows that we don’t want to show. In this case we just want to show teams from the Western Conference.
To do this we simply set our Operator as Show only, set the Value as Western Conference and we target the group.name Column as shown below. Now we will only have teams from the Western Conference in the Table.
Configure Columns
Now we go to the Columns Tab to modify the columns we need. We want to rename some of our Column headers in the Table, hide all the unnecessary columns and change the order of some columns.
To hide columns, we simply click the eye icon to toggle hiding/showing. To rename a column header, just type within the text field and it will automatically update in the Table. To rearrange the order of columns, simply drag and drop a column where you need it.
This is what our columns tab looks like after making these changes.
Formatting data in the Table
Clicking on the Format button on any item will show a popup with many different options.
You can format data as numbers, dates, percentages, images and line charts.
In our case we want to format the team logo image URL so that it actually displays the image. To do this we simply click on Image and because it is a complete URL to an image, this will now show as image.
Final Table from JSON API data
After filtering some rows, adjusting some columns and modifying a few settings, this is the final Table we have created from our JSON API data, ready to be embedded into our website.
(Obviously the settings won’t be shown once embedded, we have just shown this in the screenshot to see which settings were modified)
As you can see it only takes a few clicks to create a Table from JSON API data. With the extra filtering, formatting and styling options, you can get a feature-rich Table for your own website quite easily.
Embedding the Table
With the Table built and looking good, you are probably wanting to embed the Table somewhere.
Here is an article on embedding a Widget which covers all you need to know about how to embed the Table on your website.