Internship at Hasura — 6.1

This is the sixth week of the internship and it’s time to code the third screen, i.e Menu Page of the Restaurant App.

Development of Third Screen

This is the third screen of my Restaurant App, i.e the Menu Page which displays all the dishes which are available in a particular category. In the above picture, the App is displaying all the dishes in the Ice Cream category. As told in my previous blog, the content i.e the image, dish name and its description is not hard coded. Rather, the App is making an HTTP request to Hasura Data API and fetching the content. I have used AngularJS to fetch and display this data.

function MenuListController($scope, $location, MenuListService){
var category_name = $location.$$hash;
$scope.Category_name = category_name;
$scope.getMenuList = function () {
var promise = MenuListService.getItems(category_name);
promise.then(function(response){
$scope.responseData = response.data;
})
.catch(function(err){
alert('Something went wrong! Check the console for Details');
});
}
}

This is the controller which is responsible for displaying the Menu List content. It is important to note here the use of $location service, which is a built-in service of AngularJS. It parses the URL in the browser address bar and makes the URL available to the application. I have used $$hash property of $location object to get the hash value of current URL, which is the category name. And according to that category name, the App is making the request to Hasura Data API through a custom service called MenuListService to fetch data.

If any of the dishes are being clicked, then the modal for Placing the Order is displayed. Same thing happens if Place Order button is clicked.

If due to some reason, the app is not able to fetch the content, then it will display a pop up stating that “Something went wrong” as shown below.

You can even check out the live demo of this screen — click here. But this will be available only when my local machine is online, as here my local machine is running as the server! For more information about this technology, check out my previous blog. Click here to get the entire code. Please comment below any suggestions or feedback.