Obtaining a JSON array from PHP via JavaScript in the Ionic framework

Question

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.

This is the file where the chats variable should contain the JSON array from the PHP file.

    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 < chats.length; i++) {
        if (chats[i].id === parseInt(chatId)) {
          return chats[i];
        }
      }
      return null;
    }
  };
});

Here is where the array is accessed from within the application:

<ion-view view-title="Chats">
  <ion-content>
    <ion-list>
      <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}}">

          <div class="list card">

<div class="item item-avatar">
    <img src="{{chat.face}}">
    <h2>{{chat.name}}</h2>
    <p>{{chat.lastText}}</p>
  </div>

  <div class="">
    <img ng-src="{{chat.face}}">
  </div>

  <a class="item item-icon-left assertive" href="#/tab/chats/{{chat.id}}">
    <i class="icon ion-cash"></i>
    Get Deal!
  </a>

</div>


      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

and below is the PHP file used:

<?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);

?>

This is the controller.js:

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
  };
});

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

Thanks!

Steeve Pitis · Accepted Answer · 2016-03-03 22:32:20Z

0

This works :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script type="text/javascript">
    var myApp = angular.module('myApp', []);

    myApp.factory('chats', function($http){
      var chats = [];

      var _loading = $http.get('http://swapi.co/api/people').then(function(res){
        console.log(res.data.results);
        chats = res.data.results;
      });

      return {
        loading: _loading,
        all: function(){
          return chats;
        }
      };
    });

    myApp.controller('ChatsCtrl', function($scope, chats){
      $scope.chats = [];
      chats.loading.then(function(){
        $scope.chats = chats.all();
      });

    });


  </script>
</head>
<body ng-app="myApp">
  <div ng-controller="ChatsCtrl">
    <ul>
      <li ng-repeat="chat in chats">{{chat.name}}</li>
    </ul>
  </div>
</body>
</html>

edited Mar 3, 2016 at 22:32

answered Mar 3, 2016 at 21:29

Steeve Pitis

4,4631 gold badge24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

calmcalmuncle Over a year ago

Unfortunately this doesn't work, I tried a lot of similar approaches with no success either

calmcalmuncle Over a year ago

There is no error as such, maybe something to do with chats not being populated at the time of the app checking it?

Steeve Pitis Over a year ago

Angular has a two way binding ... When chats will be populated, angular will update your view. Can you paste your controller ?

calmcalmuncle Over a year ago

I've added the controller into the original question. have i missed something?

Steeve Pitis Over a year ago

I have edit my answer with a html file that you can test, it work ;)

nick.graziano · Accepted Answer · 2016-03-03 21:37:56Z

0

Since the Ionic framework is built on Angular, you can use the $http service. You need to request that PHP file from the $http service and then you will be able to read it as JSON. Try something like this for starters:

Make a service that has your API set up already, then call it in your controller file.

angular.module('starter.services', [])
.factory('MYAPI', function() {
    return {
        getChats: function() {
            return $http.get('http://localhost/YOURFILEHERE.php');
        }
    }
});

Now, in your controller file, assuming you've injected the MYAPI service, you can call

MYAPI.getChats().then(function(response) {
    $scope.chats = response.data;
}, function(error) {
    console.error(error);
});

You will need to change the $http.get() path to reflect the path of the PHP file on your system.

answered Mar 3, 2016 at 21:37

nick.graziano

6786 silver badges12 bronze badges

2 Comments

calmcalmuncle Over a year ago

thanks for the response! Do i add the MYAPI factory in to the service.js?

nick.graziano Over a year ago

Yes, put it in there.

Collectives™ on Stack Overflow

Obtaining a JSON array from PHP via JavaScript in the Ionic framework

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related