Up next in 10
React.js JSONPlaceholder API Example to Fetch Posts Using Axios and Display it Using Bootstrap
Jan 9, 2025
Buy the full source code of application here:
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a simple
0:05
example of fetching Dynamic data from a
0:07
rest API and showing it in the react
0:09
Chase application in the tabular
0:11
structure using react bootstrap and for
0:14
this purpose we'll be using a API called
0:16
as Json placeholder API so you can see
0:19
on your screen whenever we load the
0:21
application we are fetching the top 50
0:25
post from Top 100 post from this API and
0:28
showing it in the table structure it's a
0:31
very simple application and uh let me
0:34
show you the API here so if you just
0:37
type on Google Json placeholder it's a
0:39
fake rest API for Developers for testing
0:44
purposes so this is the actual API we be
0:47
using it
0:49
and we will be using fetch API to make
0:52
the actual rest API call so let me show
0:56
you this example so just make a simple
0:58
functional component act functional
1:05
component so after making
1:09
this we need to actually initialize the
1:13
actual State variables which will be
1:15
required for this application
1:17
so the first variable which will be
1:20
required it is required for keeping
1:23
track of how many post you want to
1:25
display so you will be using the UST
1:27
State hook initial value will be empty
1:30
the second variable which should be
1:32
required for showing a simple loading
1:34
progress for again the initial value
1:37
will be true so these are only the two
1:40
State variables which are
1:42
required and we will also be using react
1:47
bootstrap to make the user interface so
1:50
just install these two packages using
1:52
this command I've already install
1:56
this so after you do this we will just
2:01
use the use effect
2:03
Hook from the acts so this will execute
2:06
whenever you load the
2:07
application and here we will load the
2:10
actual
2:12
data and for this we will Define a
2:15
function which I will call this as fetch
2:18
post so what the what this function will
2:21
do it will actually fetch the post from
2:24
the Json placeholder
2:25
API and just make this function as async
2:29
and right here I will fetch the post in
2:33
this
2:35
variable so in this
2:38
function we will Define this TR catch
2:42
block so if any sort of error take place
2:44
we can console log it and WR inside this
2:49
uh a wait we'll use not fetch API we can
2:54
use exos xos is actually a package we
2:58
can install
3:00
it does the similar job but you need to
3:03
require it so just install this xos
3:06
package by using this command I've
3:09
already installed
3:12
it so once you do this we can import
3:15
this module at the very top xos from
3:19
xos and again also be need to requiring
3:22
bootstraps so we'll require all the
3:25
bootstrap components the table spinner
3:28
and container component and the boot CDN
3:31
file this is coming from react bootstrap
3:34
and right here you'll make a
3:37
simple fetch uh exos and there contains
3:41
a get method to make a simple get call
3:46
to the rest API so Json placeholder do
3:49
typo
3:51
code.com
3:53
SL
3:56
post so if you directly write this in
3:59
the browser you will receive a Json
4:01
response which will contain the post so
4:05
we are actually getting these Post in a
4:07
Json like structure so exactly we have
4:09
doing a simple EXO's get call after we
4:13
get this data we'll set this
4:15
post response. data so right here you
4:18
can console log the response as well in
4:21
the browser if you refresh your browser
4:24
uh go to inspect
4:26
element and console you will receive
4:29
this object if you see we have the data
4:31
property which contains 100 rows of data
4:35
and each object will have these
4:37
properties of ID title user ID
4:43
body
4:46
so now do we we just need to display
4:49
this data in the
4:50
browser we just need to change the set
4:53
loading to be false
5:00
initial value will also be false so just
5:02
change this from True to
5:14
false so now to actually display
5:18
this we will wrap everything in the
5:21
container
5:23
tag container element of react boot
5:26
STP and inside this we will have this H2
5:33
tag we simply say that Json
5:38
placeholder
5:43
post align it in the center text
5:51
Center and if the value of loading is
5:54
true in that
5:56
case it will show a simple PR
6:01
bar in the center position so for this
6:03
we using the spinner component of
6:06
bootstrap so give it an animation of
6:10
border and inside this we will simply
6:13
show in a paragraph
6:16
loading so if the value of loading is
6:19
false in that case we need to show the
6:21
data and we'll be showing the data in a
6:24
table structure Tableau structure using
6:27
the table component make it striped
6:31
bordered hover and
6:33
responsive so inside
6:36
this we will have these
6:39
uh three columns first is the
6:43
ID then we have the
6:48
title then we have the body of the post
6:53
so this data will be we need to Loop
6:55
through this data so in the table body
6:57
tag we need to Loop through
7:00
inside this jsx we will use the map
7:02
function for each
7:04
post we will Define this table row tag
7:08
give it a key parameter which will be
7:10
the ID of the post post. ID and then we
7:14
have these three properties in the table
7:16
data tag so inside curly
7:18
bracket post. ID then we display the
7:23
post.
7:25
title and then we display the body of
7:28
the post po post. body so now we have
7:31
these three properties so if you refresh
7:33
your browser you will see you will
7:35
receive this data and you will actually
7:37
see the data in the table like structure
7:40
so if you refresh and you will see
7:42
exactly 100 post appearing in the table
7:45
like structure so in this way you can
7:47
fetch data from a random user uh Json
7:50
API and display your data inside your
7:53
react CH application so it's really easy
7:56
we are using EXO's library for this for
7:58
fetching the actual data coming from the
8:01
API and we are displaying it in a table
8:04
structure using
8:05
bootstrap so this is overall application
8:08
thank you very much for watching this
8:09
video and do check out my website as
8:11
well freem mediat tools.com which
8:14
contains thousands of free tools
8:16
regarding audio video and image and I
8:19
will be seeing you in the next video
#Programming
#Software
#Web Services