在Ionic框架中通过JavaScript从PHP获取JSON数组_Javascript_Php_Angularjs_Json_Ionic Framework

在Ionic框架中通过JavaScript从PHP获取JSON数组

javascript php angularjs json ionic-framework

在Ionic框架中通过JavaScript从PHP获取JSON数组,javascript,php,angularjs,json,ionic-framework,Javascript,Php,Angularjs,Json,Ionic Framework,我试图从服务器端PHP文件中获取JSON数组。我将PHP设置为查询MySQL数据库并将结果作为JSON数组返回。我正在使用ionic框架开发一个应用程序。目前，我让应用程序使用硬编码的JSON数组，这就是需要用PHP获得的数组替换的内容在这个文件中，chats变量应该包含PHP文件中的JSON数组 angular.module('starter.services', []) .factory('Chats', function() { // Might use a resour

我试图从服务器端PHP文件中获取JSON数组。我将PHP设置为查询MySQL数据库并将结果作为JSON数组返回。我正在使用ionic框架开发一个应用程序。目前，我让应用程序使用硬编码的JSON数组，这就是需要用PHP获得的数组替换的内容

在这个文件中，chats变量应该包含PHP文件中的JSON数组

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

我尝试过使用异步调用（我不太熟悉）。我需要阵列在应用程序开始时准备就绪

谢谢

这是有效的：

<!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>


JS-Bin
var myApp=angular.module（'myApp'，[]）；
myApp.factory（'chats'，函数（$http）{
var-chats=[]；
var\u load=$http.get（'http://swapi.co/api/people）。然后（函数（res）{
console.log（res.data.results）；
chats=res.data.results；
});
返回{
加载：_加载，
全部：函数（）{
回访聊天；
}
};
});
myApp.controller（'ChatsCtrl'，函数（$scope，chats）{
$scope.chats=[]；
chats.loading.then（函数（）{
$scope.chats=chats.all（）；
});
});

{{chat.name}

由于Ionic框架是基于Angular构建的，因此您可以使用$http服务。您需要从$http服务请求该PHP文件，然后才能将其作为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文件的路径。

感谢您的响应！我是否将MYAPI工厂添加到服务.js中？是的，将其放在那里。不幸的是，这不起作用，我尝试了许多类似的方法，但都没有成功。这本身没有错误，可能与应用程序检查时未填充聊天有关？Angular具有双向绑定。。。当聊天将被填充时，angular将更新您的视图。你能粘贴你的控制器吗？我已经在原来的问题中添加了控制器。我遗漏了什么吗？我用一个html文件编辑了我的答案，你可以测试，它可以工作；）

<!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>

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

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