Many Indian startups using HackerEarth for hiring developers to join their team. Developers need to solve problems on algorithms for backend hiring challenge. For Frontend hiring challenge, developers need to build fronted application with given JSON data.

What Challenge contains ?

  1. URL to get JSON data 
  2. URL to get JSON data of API requests
  3. Wire frame design to display JSON data

Best Frameworks to use

AngularJS

AngularJS is best for Single page web application with JSON data. AngularJS Material UI framework is available with many UI components

jQuery

jQuery is good javascript library on DOM manipulation. Bootstrap UI framework is available with many UI components

Using AngulaJS + Angular Material UI

Challenge contains URL which gives JSON data. You have to make GET request to get JSON data. Find below for angular ajax GET request.
angular.module('demo', [])
.controller('demoController', ['$scope', '$http', 
  function($scope, $http) {

    $scope.fetch = function() {
      // Simple GET request example:
      $http({
        method: 'GET',
        url: 'userData.json'
      }).then(function successCallback(response) {
          // this callback will be called asynchronously
          // when the response is available
      }, function errorCallback(response) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
      });
    };


}]);
After fetching JSON data, display them as shown in wireframe

Sorting, Searching, Filtering

If you implement these features, you will get extra marks. Find below for tutorial links
You have to make GET request to get JSON data. Find below for jQuery ajax GET request.
$.ajax({
        url: "userData.json",
        jsonp: "callback",
        dataType: "json",
      }).done(function(data) {
        if(data !== null && typeof(data) !== 'object') {
          data = JSON.parse(data);
        }  
});

Sorting, Searching, Filtering

If you implement these features, you will get extra marks. Find below for tutorial links
  1. Sort JSON Data Using jQuery  
  2. Search JSON Data Using jQuery 
  3. Tagsearch with typeahead.js

Finally

You should give best design to solve given problem to get hired

1 comment:

  1. Thank you for this great explanation. It was really helpful.

    school branding

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts