Display API Response JSON Test Data In a Table

Posted on Dec 3, 2020

Online REST API testing and prototyping resource

http://reqres.in

The URL Scheme

http://reqres.in/api/users

Response Displayed in a Table

User ID	Firstname	Lastname	Email	Avatar
1	George	Bluth	george.bluth@reqres.in	https://reqres.in/img/faces/1-image.jpg
2	Janet	Weaver	janet.weaver@reqres.in	https://reqres.in/img/faces/2-image.jpg
3	Emma	Wong	emma.wong@reqres.in	https://reqres.in/img/faces/3-image.jpg
4	Eve	Holt	eve.holt@reqres.in	https://reqres.in/img/faces/4-image.jpg
5	Charles	Morris	charles.morris@reqres.in	https://reqres.in/img/faces/5-image.jpg
6	Tracey	Ramos	tracey.ramos@reqres.in	https://reqres.in/img/faces/6-image.jpg

Create a Hugo ShortCode

layout/shortcodes/usersJSON.html

Put this as the content of the file

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{{ $urlPre := "https://reqres.in" }}
{{ $users := getJSON $urlPre "/api/users" }}
<table>
	<thead>
		<tr>
			<th>User ID</th>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Email</th>
			<th>Avatar</th>
		</tr>
	</thead>
	<tbody>
		{{ range $users.data }}
		<tr>
			<td>{{ .id }}</td>
			<td>{{ .first_name }}</td>
			<td>{{ .last_name }}</td>
			<td>{{ .email }}</td>
			<td><a href="{{ .avatar }}" target="_blank">{{ .avatar }}</a></td>
    </tr>
    {{ end }}
	</tbody>
</table>

Now to call the shortcode in the markdown file users-test-data.md

1
{{/*%<usersJSON url="https://reqres.in" scheme="/api/users">%*/}}

Just note that the above is commented to avoid been processed as shortcode.

Sample JSON data from the above URL Scheme(/api/users)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
{
	"page": 1,
	"per_page": 6,
	"total": 12,
	"total_pages": 2,
	"data": [
		{
			"id": 1,
			"email": "george.bluth@reqres.in",
			"first_name": "George",
			"last_name": "Bluth",
			"avatar": "https://reqres.in/img/faces/1-image.jpg"
		},
		{
			"id": 2,
			"email": "janet.weaver@reqres.in",
			"first_name": "Janet",
			"last_name": "Weaver",
			"avatar": "https://reqres.in/img/faces/2-image.jpg"
		},
		{
			"id": 3,
			"email": "emma.wong@reqres.in",
			"first_name": "Emma",
			"last_name": "Wong",
			"avatar": "https://reqres.in/img/faces/3-image.jpg"
		},
		{
			"id": 4,
			"email": "eve.holt@reqres.in",
			"first_name": "Eve",
			"last_name": "Holt",
			"avatar": "https://reqres.in/img/faces/4-image.jpg"
		},
		{
			"id": 5,
			"email": "charles.morris@reqres.in",
			"first_name": "Charles",
			"last_name": "Morris",
			"avatar": "https://reqres.in/img/faces/5-image.jpg"
		},
		{
			"id": 6,
			"email": "tracey.ramos@reqres.in",
			"first_name": "Tracey",
			"last_name": "Ramos",
			"avatar": "https://reqres.in/img/faces/6-image.jpg"
		}
	],
	"support": {
		"url": "https://reqres.in/#support-heading",
		"text": "To keep ReqRes free, contributions towards server costs are appreciated!"
	}
}