Render Prettified API JSON Response with an API Tester in React.js
Introduction
As a frontend developer, you'll often find yourself debugging values returned from an API in JSON format. In most cases, these return values are structured into complex nested objects of information. It's best to visualize the structure of the values being returned by an API directly in the webpage itself with proper indentation and formatting. In this guide, you will create a simple tool in React.js that allows you to do just that.
Setup
First, create a React.js component called APITester that initially looks like the following:
1import React from 'react';
2import $ from 'jquery';
3
4export default class APITester extends React.Component {
5 constructor(props) {
6 super(props);
7
8 this.state = {
9 jsonData: {},
10 apiEndpoint: ""
11 }
12 }
13
14 render() {
15 return (
16 <div>
17 <pre>
18 {this.state.jsonData}
19 </pre>
20 <hr/>
21 <input
22 type="text"
23 />
24 <button>
25 Fetch
26 </button>
27 </div>
28 );
29 }
30}There are two main state variables to maintain:
jsonData: Used to store the response of the endpointapiEndpoint: The API endpoint that the user will specify
User Input of API Endpoint
Next, fill in the functionality where the user will input the API endpoint in the input element. Every change will update the apiEndpoint state value.
First, create an event handler to be triggered on every modification of the input element:
1handleEndpointChanged(event) {
2 this.setState({
3 apiEndpoint: event.target.value;
4 });
5}All this function is doing is updating the value of the state property apiEndpoint from event.target, which points to the input element this function refers to.
Attach the event handler to the input element's onChange attribute:
1<input
2 type="text"
3 onChange={this.handleEndpointChanged.bind(this)}
4/>Fetching Data from an Endpoint
Next, create the event handler every time the button is clicked:
1handleButtonClicked() {
2 var context = this;
3
4 $.ajax({
5 url: context.state.apiEndpoint,
6 dataType: "json",
7 method: "GET",
8 success: function(response) {
9 context.setState({
10 jsonData: response
11 });
12 }
13 });
14}This function fetches data from the endpoint as specified by the user, which in turn updates to the value apiEndpoint. It's expected that the return value will be of dataType: "json". On a successful call, the state property jsonData will have to be updated to the value of response, which contains the actual return value of the API endpoint apiEndpoint. Notice also that the function uses the variable context to refer to this, which is an instance of the component itself. This is necessary so you can still refer to the setState() method from within the success function. This can also be seen when assigning the value of url in the ajax call to context.state.apiEndpoint.
Next, attach the event handler to the onClick attribute of the button:
1<button
2 onClick={this.handleButtonClicked.bind(this)}
3>
4 Fetch
5</button>Once the button is clicked, the function handleButtonClicked will fire and, together with the ajax call, set the value for jsonData to be displayed in a prettified format (that is, with proper indentation, quotes, and nesting of objects).
Rendering the Prettified Version
On every trigger of setState, the render() function will be invoked, thus updating the expected interface of this component. To make sure that the JSON data displayed follows the proper format, there are two requirements:
- Make sure to format the JSON with appropriate escape characters for tabs and nested objects.
- Render the formatted JSON to a
<pre>tag to retain its formatting on the web.
Your render() code should look something like this:
1render() {
2 return (
3 <div>
4 <pre>
5 {JSON.stringify(this.state.jsonData, undefined 2)}
6 </pre>
7 <hr/>
8 <input
9 type="text"
10 onChange={this.handleEndpointChanged.bind(this)}
11 />
12 <button
13 onClick={this.handleButtonClicked.bind(this)}
14 >
15 Fetch
16 </button>
17 </div>
18 );
19}You have to invoke the function JSON.stringify(someJsonData, undefined 2) to insert the necessary escape characters to format the object properly. Next, make sure that the resulting value after JSON.stringify is rendered between <pre> tags. This will allow the page to retain escape characters for proper formatting of the display, thus creating the prettifying effect.
Overall Code
1import React from 'react';
2import $ from 'jquery';
3
4export default class APITester extends React.Component {
5 constructor(props) {
6 super(props);
7
8 this.state = {
9 jsonData: {},
10 apiEndpoint: ""
11 }
12 }
13
14 handleEndpointChanged(event) {
15 this.setState({
16 apiEndpoint: event.target.value
17 });
18 }
19
20 handleButtonClicked() {
21 var context = this;
22
23 $.ajax({
24 url: context.state.apiEndpoint,
25 dataType: "json",
26 method: "GET",
27 success: function(response) {
28 context.setState({
29 jsonData: response
30 });
31 }
32 });
33 }
34
35 render() {
36 return (
37 <div>
38 <pre>
39 {JSON.stringify(this.state.jsonData, undefined, 2)}
40 </pre>
41 <hr/>
42 <input
43 type="text"
44 onChange={this.handleEndpointChanged.bind(this)}
45 />
46 <button
47 onClick={this.handleButtonClicked.bind(this)}
48 >
49 Fetch
50 </button>
51 </div>
52 );
53 }
54}Try it out by entering https://api.coindesk.com/v1/bpi/currentprice.json into the input element and hitting Fetch. It should return data relating to Bitcoin prices and render it with proper formatting on the webpage.
Conclusion
In this guide, you created a component that accepts a URL endpoint from the user representing an API that is expected to return JSON data. To examine the return value, the JSON response has to be first cleaned as a string with appropriate formatting using the JSON.stringify() function. When rendering to HTML, in order to retain the escape characters from the stringified JSON, the value has to be within <pre> tags. This way, the rendered data is much more presentable to the user for further analysis of the response.
Try it yourself, and try to extend the component to include the following:
- Differentiation between a GET and a POST
- Additional parameters with the request (also provided by the user)
- Error handling (in case the API endpoint does not return data type JSON)