title: Populate an array with data from database (Angular + PHP/MySQL)
body: <p>I have a simple to-do app I'm working on, which is using Angular and then PHP/MySQL for the backend. </p>
  
  <p>I now have a simple app that works, where I can add new todos, and add the "percentage completed" per day to the Database, using a simple <code>$http post</code>. </p>
  
  <p>However now what I'm looking to do is, populate the <code>$scope.historicalDailyPercentages</code> array, with data from the database. </p>
  
  <p>At the start of the script, I init the object like so:</p>
  
  <pre><code>$scope.historicalDailyPercentages = []; //TODO, this should be initialised with data from the database.
  </code></pre>
  
  <p>I understand I'll need to have some sort of $http get loop in there, to check for the data and fill the object, but I'm a little unclear on how to get started there. </p>
  
  <p>The entire goalzy.js script is below for reference. Thanks in advance! </p>
  
  <pre><code>angular.module('goalzy', [])
  
  .config(['$httpProvider', function($httpProvider) {
      $httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
  }])
  
  .controller('TodoController', ['$scope', '$http', function($scope, $http) {
  
      $scope.todos = [];
      $scope.historicalDailyPercentages = []; //TODO, this should be initialised with data from the database.
  
      $scope.addTodo = function() {
          if ($scope.todoText != "") {
              if ($scope.todos.length &lt; 3) {
                  $scope.todos.push({
                      text: $scope.todoText,
                      done: false
                  });
                  $scope.todoText = '';
                  //Save to DB
              } else {
                  alert("You can only have 3 todos per day!");
                  $scope.todoText = '';
              }
          } else {
              alert("you must write something");
          }
      };
  
      $scope.remaining = function() {
          var count = 0;
          angular.forEach($scope.todos, function(todo) {
              count += todo.done ? 0 : 1;
          });
          return count;
      };
  
      $scope.percentComplete = function() {
          var countCompleted = 0;
          angular.forEach($scope.todos, function(todo) {
              countCompleted += todo.done ? 1 : 0; //Simply calculates how many tasks have been completed
              console.log(countCompleted);
          });
          var totalCount = $scope.todos.length;
          var percentComplete = countCompleted / totalCount * 100;
          return percentComplete;
      }
  
      $scope.finaliseDay = function(percentComplete) {
          alert("You're finalising this day with a percentage of: " + percentComplete);
          var today = new Date();
          var alreadyPresent = $scope.historicalDailyPercentages.some(function(item) {
              return item.date.getFullYear() === today.getFullYear() &amp;&amp;
                  item.date.getMonth() === today.getMonth() &amp;&amp;
                  item.date.getDate() === today.getDate();
          });
  
          //Confirm that nothing has alreayd been posted for today
          if (!alreadyPresent) {
  
              // Simple POST request example (passing data)
              $http.post('/postDailyPercentage.php', {
                  user_id: 1,
                  percent: percentComplete,
                  date: today
              }).
              success(function(data, status, headers, config) {
                  // this callback will be called asynchronously
                  // when the response is available
                  if (data) {
  
                      $scope.historicalDailyPercentages.push({
                          user_id: 1,
                          percent: percentComplete,
                          date: today
                      });
  
                  } else {
                      alert("Something went wrong" + data);
                  }
  
              }).
              error(function(data, status, headers, config) {
                  // called asynchronously if an error occurs
                  // or server returns response with an error status.
                  console.log("Post failure");
              });
          } else {
              alert("You're all set for today - see you tomorrow!");
          }
  
          //console.log($scope.historicalDailyPercentages);
      }
  }]);
  </code></pre>