AngularJS Test App

by Rishabh Sharma

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div class="container" ng-controller="MyCtrl as vm">
  <p ng-show="vm.loading">
    loading...
  </p>

  <div ng-show="!vm.loading">
    <div ng-repeat="drink in vm.drinks">
      {{drink.name}}
    </div>
  </div>

</div>

CSS

.container {
  padding: 10px;
}

JavaScript

angular.module('myApp', [])
  .controller('MyCtrl', MyCtrl)
  .factory('drinkService', drinkService);

function MyCtrl($scope, drinkService) {
  var vm = this;
  vm.loading = true;
  drinkService.getDrinks().then(function success(data) {
    vm.drinks = data;
    vm.loading = false;
  });
}

function drinkService($http) {
  var url = 'https://raw.githubusercontent.com/Randmness/DeathByCaffeine-Enyo/master/data/canonDbList_dbService.json';
  var drinkService = {
    getDrinks: getDrinks
  };
  return drinkService;

  function getDrinks() {
    return $http.get(url).then(function(response) {
      return response.data.results;
    })
  };

  function parser(data) {
    var drinks = [];
    data.forEach(function(elem) {
      drinks.push(elem.name.toUpperCase());
    });
    return drinks;
  }

}