How to create JSON Server and Fetch Data For Front-end

  ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 73,989

Daily Tuition

Daily Tuition

2 ะถั‹ะป ะฑาฑั€ั‹ะฝ

How to create JSON Server and Fetch Data For Front-end
In this tutorial, we are going to create a JSON server and fetch data from it to test the front-end of the application. We will make a mock API. Sometimes we need some data for testing Front-end, JSON Server provides a mock API for testing the front-end. So we will look at how to make a beautiful UI using Html and CSS and fetch data from the JSON Server as well as we are going to filter the data which we fetch from the JSON server.
Comment us if you have any questions or
๐Ÿ‘‰ Support Me on Patreon ๐Ÿ˜Š:
/ dailytuition
๐Ÿš€ Udemy Courses:
www.udemy.com/user/akshay-kas...
๐ŸŽ… Playlist :
Complete MERN Series
โ€ข Getting Started with M...
โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘
๐Ÿ› ๏ธ Tools I use:
๐ŸŸ  My Theme: โ€ข Finally, I am Back! St...
๐ŸŸ  Font Family: fonts.google.com/specimen/Rub...
โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘
๐Ÿ‘‰ Follow us:
๐ŸŸ  / akki.2013
๐Ÿ“‚ Source Project
๐Ÿ“ฆ github.com/akashyap2013/JsonS...
โฑ๏ธ Timestamps โฑ๏ธ
00:00 - Intro
โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘
More Videos:
๐Ÿ’ก Complete Node Course
โ€ข Complete Node & Expres...
โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–
๐Ÿ’ก React Complete Tutorial
โ€ข Complete React 16.8 Cr...
โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–
๐Ÿ’ก Complete Mobile Shopee E-Commerce Website Course - PHP & MySQL
โ€ข Complete Mobile Shopee...
โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–
๐Ÿ’ก Complete Portfolio Website with Bootstrap - HTML/CSS
โ€ข Complete Portfolio Web...
โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–
๐Ÿ’ก Complete Responsive Blooger Website Using HTML/CSS
โ€ข Complete Responsive Bl...
โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–
๐Ÿ’ก Create a Shopping Cart Using PHP and Mysql
โ€ข Create Shopping Cart U...
โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–
๐Ÿ’ก Asp.net Registration Form Design with Validation Part - 1
โ€ข Asp.net Registration F...
โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–
๐Ÿ’ก Complete CRUD Operation with PHP MySql Database
โ€ข Complete CRUD Operatio...
โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–
๐Ÿ’ก What is Node.js? How to install it?
โ€ข What is Node.js? Only ...
โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–
๐Ÿ’ก PHP Complete Registration & Login System Using MySQLi - Complete Guide
โ€ข PHP Complete Registrat...
โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–
๐Ÿ’ก Hosting WordPress Website with Free Hosting
โ€ข Hosting Wordpress Webs...
โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–โ–
๐Ÿ’ก Bootstrap Grid System The Complete Guide - In Action
โ€ข Asp.net Registration F...
Like this video If you find anything useful. Share with your friends that is all for now I will see you In the next one.
Thank You...! ๐Ÿ™
โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘โ‹โ‹‘
#dailytuition #programming #tutorials #code #vscode

ะŸั–ะบั–ั€ะปะตั€: 42
@caugbarros
@caugbarros 2 ะฐะน ะฑาฑั€ั‹ะฝ
Hi from Brazil! Your video helped me a lot, thank you, great work ๐Ÿ˜Š
@mdismailhossain2219
@mdismailhossain2219 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
You are doing a great job Sir......we are listening to you, learning from you.....Lots of love and respect...
@DailyTuition
@DailyTuition 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
Thank you. Keep supporting
@AllinOneBox8
@AllinOneBox8 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
Thanks, your video is very clear and understandable
@sr.nitish2268
@sr.nitish2268 6 ะฐะน ะฑาฑั€ั‹ะฝ
You are the best...we liked your videos and leaned alot from it...please keep teaching us :)
@gowthamip6688
@gowthamip6688 2 ะฐะน ะฑาฑั€ั‹ะฝ
It's really nice and now I got some idea about json serverโœจ.. Thank you for providing valuable vedio
@sachinkumanache6603
@sachinkumanache6603 ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
great sir now i understand how to create json server ๐Ÿ™๐Ÿ™
@hidayet.hidayetov
@hidayet.hidayetov 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
Calm down while listening :) tnx
@uminhtetoo
@uminhtetoo ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
Thank you so much for sharing your knowledge, Sir.
@Comedy_Center12
@Comedy_Center12 2 ะฐะน ะฑาฑั€ั‹ะฝ
Love You Brother โคโคโคโค
@VirtualVortex4356
@VirtualVortex4356 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
Thankyou for the tut
@young_blackafrica_my_pride8625
@young_blackafrica_my_pride8625 10 ะฐะน ะฑาฑั€ั‹ะฝ
This is awesome ๐Ÿ’ฏ
@abdurrahmanrasel408
@abdurrahmanrasel408 ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
Very helpful ๐Ÿ”ฅ
@nishanthcodes4576
@nishanthcodes4576 ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
Life saver!!
@gangstersofsona8486
@gangstersofsona8486 ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
Very helpful video Sir. But, even after removing the html code for "tr" I get displayed undefined in the table as first row. The other row data are perfectly loaded from json server. Can you please help me with that?
@ManishSharma-lm3wg
@ManishSharma-lm3wg ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
also how to perform crud operations on this ?
@mihuynh1825
@mihuynh1825 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
Hi thanks for your video. Why is it reloading the page even I used preventDefault() to prevent onclick/submit of button of the form?
@DailyTuition
@DailyTuition 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
Plz show me the code
@ericyamir
@ericyamir ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
great video. what do I need to do to display amounts as $100,000 instead 100000?
@ManishSharma-lm3wg
@ManishSharma-lm3wg ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
awswome video, please provide src code as its focused on data fetch so had to type front end long
@DailyTuition
@DailyTuition ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
It's in the description
@raymondmichael4987
@raymondmichael4987 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
Being wondering, can you create a โ€œproduction ready โ€œ application using sveltekit & tailwindcss using json-server as a mock api. I enjoyed the last production ready series with nodejs
@DailyTuition
@DailyTuition 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
Yes sure.
@PoonamKumari-wc5ls
@PoonamKumari-wc5ls ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
Sir How to upload this angular app with database on online server like AWS or netlify
@deepmane5845
@deepmane5845 ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
inside template literals how to add onclick function for me it say undefined
@kacperkepinski4990
@kacperkepinski4990 ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
why your port is 5500 and you write ip instead of localhost in browser?
@forester1
@forester1 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
Sir i want to use it for mobile application back end server database Like firebase realtime data base Is it possible ? Is it secure ?
@DailyTuition
@DailyTuition 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
Yes it is
@chsuman1055
@chsuman1055 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
Could you please explain with out using tables ?
@DailyTuition
@DailyTuition 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
What do you want me to explain?
@MuhammadIrfan-ni9pb
@MuhammadIrfan-ni9pb 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
Sir how to change color status depend on situation, for example green for active red for inactive? Thanks sir
@raymondmichael4987
@raymondmichael4987 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
You put expression to test on status in the class names like class=โ€˜ text-${status == โ€œactiveโ€? green : red}-500โ€™ That is: If(status == โ€œactiveโ€) return โ€œgreenโ€ else return โ€œredโ€ Happy coding. Greetings from Tanzania ๐Ÿ‡น๐Ÿ‡ฟ
@kareemreda55
@kareemreda55 11 ะฐะน ะฑาฑั€ั‹ะฝ
name theme and font family in vscode
@sacmah2655
@sacmah2655 ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
How can someone display this information by just clicking a button?
@lifebest4404
@lifebest4404 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
Sir how to create uber app backund php
@DailyTuition
@DailyTuition 2 ะถั‹ะป ะฑาฑั€ั‹ะฝ
Backend?
@codeAlongwith
@codeAlongwith ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
Your making life hard for yourself without using emmet.
@akashchauhan4142
@akashchauhan4142 ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
๐Ÿ˜‚
@illusionShadowvlogs
@illusionShadowvlogs ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
sir react app install next new object create freamework start sir help u sir
@hkmedia238
@hkmedia238 4 ะฐะน ะฑาฑั€ั‹ะฝ
i AM BATMAN
@mornelouw
@mornelouw ะ–ั‹ะป ะฑาฑั€ั‹ะฝ
The first 11mins 36 is a waste of time. JSON server explanation only starts after that
Filter Products with Two Different Ways with JavaScript
46:01
Filter Products with Two Different Ways with JavaScript
Daily Tuition
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 22 ะœ.
1.4: JSON - Working with Data and APIs in JavaScript
16:22
1.4: JSON - Working with Data and APIs in JavaScript
The Coding Train
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 641 ะœ.
Tetris Game + Nuggets ๐Ÿ˜ฎ - CatNap Meme School #gegagedigedagedago #nuggets #memes
00:18
Tetris Game + Nuggets ๐Ÿ˜ฎ - CatNap Meme School #gegagedigedagedago #nuggets #memes
Infinity Circus
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 7 ะœะ›ะ
LOVE LETTER - POPPY PLAYTIME CHAPTER 3 | GH'S ANIMATION
00:15
LOVE LETTER - POPPY PLAYTIME CHAPTER 3 | GH'S ANIMATION
GH'S
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 58 ะœะ›ะ
One moment can change your life โœจ๐Ÿ”„
00:32
One moment can change your life โœจ๐Ÿ”„
A4
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 19 ะœะ›ะ
ะขะะœะะ•ะ’ ะฃะะ˜ะงะขะžะ–ะ˜ะ› CLS ะ’ะ•ะะ“ะะ›ะ‘ะ˜! ะšะพะฝั„ะปะธะบั‚ ั ะั…ะผะตะดะพะผ?!
25:37
ะขะะœะะ•ะ’ ะฃะะ˜ะงะขะžะ–ะ˜ะ› CLS ะ’ะ•ะะ“ะะ›ะ‘ะ˜! ะšะพะฝั„ะปะธะบั‚ ั ะั…ะผะตะดะพะผ?!
ะัั…ะฐะฑ ะขะฐะผะฐะตะฒ
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 3,5 ะœะ›ะ
Learn JSON in 10 Minutes
12:00
Learn JSON in 10 Minutes
Web Dev Simplified
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 3,1 ะœะ›ะ
Up & Running with JSON Server (Part 1)
30:02
Up & Running with JSON Server (Part 1)
Net Ninja
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 127 ะœ.
React authentication using JSON Server REST API | Registration screen |React JS Full Course
32:19
React authentication using JSON Server REST API | Registration screen |React JS Full Course
Nihira Techiees
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 47 ะœ.
ะ›ะพะบะฐะปัŒะฝั‹ะน ัะตั€ะฒะตั€ ะดะปั ะฟั€ะพะตะบั‚ะพะฒ ะธ ั‚ะตัั‚ะธั€ะพะฒะฐะฝะธั
12:58
ะ›ะพะบะฐะปัŒะฝั‹ะน ัะตั€ะฒะตั€ ะดะปั ะฟั€ะพะตะบั‚ะพะฒ ะธ ั‚ะตัั‚ะธั€ะพะฒะฐะฝะธั
ะœะธั…ะฐะธะป ะะตะฟะพะผะฝัั‰ะธะน
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 41 ะœ.
Create a Fake REST API with JSON-Server
21:01
Create a Fake REST API with JSON-Server
Traversy Media
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 208 ะœ.
Learn JSON Step-by-Step from Scratch
13:11
Learn JSON Step-by-Step from Scratch
Automation Step by Step
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 100 ะœ.
JSON and AJAX Tutorial: With Real Examples
40:45
JSON and AJAX Tutorial: With Real Examples
LearnWebCode
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 1,8 ะœะ›ะ
Redis Crash Course
27:31
Redis Crash Course
Web Dev Simplified
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 606 ะœ.
Tetris Game + Nuggets ๐Ÿ˜ฎ - CatNap Meme School #gegagedigedagedago #nuggets #memes
00:18
Tetris Game + Nuggets ๐Ÿ˜ฎ - CatNap Meme School #gegagedigedagedago #nuggets #memes
Infinity Circus
ะ ะตั‚ า›ะฐั€ะฐะปะดั‹ 7 ะœะ›ะ