title: Obtaining a JSON array from PHP via JavaScript in the Ionic framework
body: <p>I am trying to to get a JSON array from a server side PHP file. I have the PHP set up to query a MySQL database and return the result as a JSON array. I'm using the ionic framework to develop an app. At the moment I have the app working with a hard coded JSON array, this is what needs to be replaced by the array gained from the PHP.</p>
  
  <p>This is the file where the chats variable should contain the JSON array from the PHP file.</p>
  
  <pre><code>    angular.module('starter.services', [])
  
  
  .factory('Chats', function() {
    // Might use a resource here that returns a JSON array
  
    // Some fake testing data
    var chats = [{
      id: 0,
      name: 'Ben Sparrow',
      lastText: 'You on your way?',
      face: 'img/ben.png'
    }, {
      id: 1,
      name: 'Max Lynx',
      lastText: 'Hey, it\'s me',
      face: 'img/max.png'
    }, {
      id: 2,
      name: 'Adam Bradleyson',
      lastText: 'I should buy a boat',
      face: 'img/adam.jpg'
    }, {
      id: 3,
      name: 'Perry Governor',
      lastText: 'Look at my mukluks!',
      face: 'img/perry.png'
    }, {
      id: 4,
      name: 'Mike Harrington',
      lastText: 'This is wicked good ice cream.',
      face: '/img/mike.png'
    }];
  
    return {
      all: function() {
        return chats;
      },
      remove: function(chat) {
        chats.splice(chats.indexOf(chat), 1);
      },
      get: function(chatId) {
        for (var i = 0; i &lt; chats.length; i++) {
          if (chats[i].id === parseInt(chatId)) {
            return chats[i];
          }
        }
        return null;
      }
    };
  });
  </code></pre>
  
  <p>Here is where the array is accessed from within the application:</p>
  
  <pre><code>&lt;ion-view view-title="Chats"&gt;
    &lt;ion-content&gt;
      &lt;ion-list&gt;
        &lt;ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}"&gt;
  
            &lt;div class="list card"&gt;
  
  &lt;div class="item item-avatar"&gt;
      &lt;img src="{{chat.face}}"&gt;
      &lt;h2&gt;{{chat.name}}&lt;/h2&gt;
      &lt;p&gt;{{chat.lastText}}&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class=""&gt;
      &lt;img ng-src="{{chat.face}}"&gt;
    &lt;/div&gt;
  
    &lt;a class="item item-icon-left assertive" href="#/tab/chats/{{chat.id}}"&gt;
      &lt;i class="icon ion-cash"&gt;&lt;/i&gt;
      Get Deal!
    &lt;/a&gt;
  
  &lt;/div&gt;
  
  
        &lt;/ion-item&gt;
      &lt;/ion-list&gt;
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>and below is the PHP file used:</p>
  
  <pre><code>&lt;?php
  define('HOST','host');
  define('USER','user');
  define('PASS','password');
  define('DB','db');
  
  $con = mysqli_connect(HOST,USER,PASS,DB);
  
  $sth = mysqli_query($con, "SELECT * FROM chats;");
  
  $rows = array();
  
  while($r = mysqli_fetch_assoc($sth)) {
      $rows[] = $r;
  }
  
  echo json_encode($rows);
  
  mysqli_close($con);
  
  ?&gt;
  </code></pre>
  
  <p>This is the controller.js:</p>
  
  <pre><code>angular.module('starter.controllers', [])
  
  .controller('DashCtrl', function($scope) {})
  
  .controller('ChatsCtrl', function($scope, Chats) {
    // With the new view caching in Ionic, Controllers are only called
    // when they are recreated or on app start, instead of every page change.
    // To listen for when this page is active (for example, to refresh data),
    // listen for the $ionicView.enter event:
    //
    //$scope.$on('$ionicView.enter', function(e) {
    //});
  
    $scope.chats = Chats.all();
    $scope.remove = function(chat) {
      Chats.remove(chat);
    };
  })
  
  .controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
    $scope.chat = Chats.get($stateParams.chatId);
  })
  
  .controller('AccountCtrl', function($scope) {
    $scope.settings = {
      enableFriends: true
    };
  });
  </code></pre>
  
  <p>I've tried using an async call (which i'm not totally familiar with). I need the array to be ready at the start of the app</p>
  
  <p>Thanks!</p>