This article will show how easy it is to convert a JSON API to HTML – or convert a JSON file to HTML, without writing any code.
API Widgets allows you to create HTML Widgets from API data, or to use your own JSON file. In either case, the process for creating a HTML Widget is the same.
To create a HTML Widget from your JSON API, 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 HTML will use and setup some styling options to get the HTML looking the way we need.
Selecting JSON data to convert to HTML
After creating the Widget, you will see the Preview Tab and the JSON data from the API 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 HTML.
If the data within the node contains items you don’t need to use in the HTML, you can easily turn these off in the next steps.
Depending on the API being used, you may want to use the entire data within the API or just a small section of the data.
Building the HTML from JSON data
For this example, we selected the very first upper item (the first ‘0’) as this contains all the data that we required. With the data selected & highlighted, you can now click the Build HTML button and the HTML will be created from the selected JSON data.
Our HTML is now shown in the Preview Tab, ready to be customized. The initial output is always simply making the labels as H4 tags, the values as span tags and wrapping each item in a div.
Modifying the data we need
Each item of JSON data is now represented as it’s own item within the Data Tab, which we can then customize as we need.
You can see from the image below that we have turned off many items that we don’t require (by clicking the eye icon) and we have also changed the order by dragging and dropping.
Formatting data in the HTML
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.
Here we are showing the changes we have made to the current.temp_c item which displays our current temperature. We’ve made it green, made the value a H5, added a prefix and a suffix to the label. We’ve hidden the label and set the width to be 50%.
Customize HTML using CSS
Clicking on the code button (</>) shows a CSS field that allows us to add custom CSS to provide complete styling of our HTML.
Along with the formatting we have done with each item, the small amount of CSS shown here allows us to style whatever we like. We have simply added a box shadow and some other styling to the main wrapper of the HTML and aligned our icon.
Final HTML from JSON API data
After hiding some items, formatting some items and adding some simple CSS, this is the final HTML we have created from our JSON API data, ready to be embedded into our website.
As you can see it only takes a few clicks to create a HTML from JSON API data. With the extra filtering, formatting and styling options, you can get a feature-rich HTML Widget for your own website quite easily.