Working with a Local Data Source
Learn to interact with the back-end server and receive data from the local data source.
Let’s set up our application to interact with the back-end server. We need to make a directory named api in our application’s main directory. Let’s create a directory and a products.json file in the public directory of our application.
Setting up JSON data in the products.json file
Let’s open the products.json file and add the product JSON data:
Press + to interact
{"data": [{"id" : 1,"product_title": "Test Product 1","category_id": "men","price": 17,"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.","imglink":"/assets/images/men_fashion.jpg"},{"id" : 2,"product_title": "Test Product 2","category_id": "men","price": 10,"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.","imglink":"/assets/images/shirt.jpg"},{"id" : 3,"product_title": "Test Product 3","category_id": "women","price": 52,"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.","imglink":"/assets/images/ladies_sendals.jpg"},{"id" : 4,"product_title": "Test Product 4","category_id": "men","price": 30,"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.","imglink":"/assets/images/ladies_shoes.jpg"},{"id" : 5,"product_title": "Test Product 5","category_id": "kids","price": 5,"desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.","imglink":"/assets/images/watch.jpg"}]}