Я пытаюсь получить массив JSON из файла PHP на стороне сервера. У меня есть PHP, созданный для запроса базы данных MySQL и возврата результата в виде массива JSON. Я использую ионную инфраструктуру для разработки приложения. На данный момент у меня есть приложение, работающее с жестко закодированным массивом JSON, это то, что нужно заменить массивом, полученным из PHP.
Это файл, в котором переменная chats должна содержать массив JSON из файла PHP.
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; } }; }); Здесь вы можете получить доступ к массиву из приложения:
<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>
и ниже используется файл PHP:
<?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); ?>
Это 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 }; });
Я пробовал использовать асинхронный вызов (с которым я не совсем знаком). Мне нужно, чтобы массив был готов в начале приложения
Благодаря!
Это работает :
<!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>
Поскольку Ionic-структура построена на Angular, вы можете использовать службу $ http. Вам нужно запросить этот файл PHP из службы $ http, после чего вы сможете прочитать его как JSON. Попробуйте что-то вроде этого для начинающих:
Создайте службу, у которой уже установлен ваш API, затем вызовите ее в файл вашего контроллера.
angular.module('starter.services', []) .factory('MYAPI', function() { return { getChats: function() { return $http.get('http://localhost/YOURFILEHERE.php'); } } });
Теперь, в вашем файле контроллера, предположив, что вы ввели MYAPI-службу, вы можете позвонить
MYAPI.getChats().then(function(response) { $scope.chats = response.data; }, function(error) { console.error(error); });
Вам нужно будет изменить путь $ http.get (), чтобы отобразить путь к файлу PHP в вашей системе.