This is a mini project that demonstrates how to use the Fetch API to retrieve data from a JSON server and dynamically display it on a web page. The project consists of HTML, JavaScript, and a sample JSON database.
Make sure you have a JSON server installed. You can use json-server or any other similar tool to serve the db.json file. You can run the JSON server using the following command: npx json-server db.json
The db.json
file serves as a simulated database with a list of people. Each person in the database has attributes such as name, surname, sex, age, and a URL to their photo.
The script.js
file contains JavaScript code that listens for a button click. When the button is clicked, it asynchronously fetches data from the JSON server using the Fetch API,
processes the data, and dynamically creates HTML elements to display each person's information on the web page.
- Clone or download this repository.
- Start the JSON server using
npx json-server db.json
. - Open the
index.html
file in a web browser or use a development environment like Live Server to run the project. - Click the "Click" button, and the information of the people from the JSON database will be fetched and displayed on the web page.