Angular $ HTTP空白数据

时间:2015-10-22 00:10:14

标签: javascript json angularjs

我的问题解释如下: 这是我的HTML。

   <!doctype html>
   <html ng-app="myApp">
   <head>
   <meta charset="utf-8">
   <title>Angular.js test</title>
   <script src="http://code.jquery.com/jquery-latest.min.js"></script>
   <script src="node_modules/angular/angular.min.js"></script>
   <script src="js/controllers.js"></script>
   </head>

      <body>
      <div ng-controller = "MyController" id="myDiv">
        <ul>
          <li ng-repeat="item in flow">
                {{item.name}}       
          </li>
        </ul>
     </div>
     </body>
     </html>

这是我的自定义角度

var myApp = angular.module('myApp', []);
    myApp.controller('MyController', ['$scope', '$http', function($scope, $http){
        $scope.flow = [];
        $http.get('js/data.json').then(
            function(data){
                console.log(data);
                $scope.flow = data ;
           }, 
            function(data){
                console.error('error');     
        });
     }]);

我的data.json文档包含在下面。

 [
    {
      "name":"Barot Bellingham",   
      "reknown":"Royal Academy of Painting and Sculpture",

    },
    {
      "name":"Jonathan G. Ferrar II",
      "reknown":"Artist to Watch in 2012",

    }
 ]

如果我将这些数据直接放在控制器中,它可以完美地工作! 但是,如果我将这些数据放在一个单独的文件(js / data.json)中并使用$ http,则数据会返回BLANK,尽管成功函数为TRUE且没问题。甚至列表项目符号重复但数据为空。

有什么特别的理由说这不会起作用吗?请帮助!! ![This an example of the app working with the data is place inside the controller] 1

Here is an example of it not working when I put the data in a separate file

1 个答案:

答案 0 :(得分:1)

是的。您的http响应返回一个包含以下属性的对象。 (from Angular docs on $http

  • data - {string|Object} - 使用转换函数转换的响应主体。
  • status - {number} - 响应的HTTP状态代码。
  • 标题 - {function([headerName])} - 标题获取功能。
  • config - {Object} - 用于生成请求的配置对象。
  • statusText - {string} - 响应的HTTP状态文本。
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', '$http', function($scope, $http){
    $scope.flow = [];
    $http.get('js/data.json').then(
        function(data){
            console.log(data);
            $scope.flow = data.data;
       }, 
        function(data){
            console.error('error');     
    });
 }]);