显示JSON数据在角应用 [英] Displaying json data in an Angular App

问题描述

我想从一个JSON文件解析数据，并在我的角度应用程序中显示，但对于一些奇怪的原因的看法不会显示数据（INTE preT我的前妻pressions），我想这可能是我的控制器，但它看起来不错。任何帮助将是解决这一pciated AP $ P $，谢谢。

下面是code为我的HTTP服务：

  app.factory（'信息'，['$ HTTP'，函数（$ HTTP）{
  返回
  $http.get('https://api.flickr.com/services/feeds/photos_public.gne?&format=json&callback=JSON_CALLBACK')
      .success（功能（数据）{
         返回的数据;
      }）
       .error（功能（错误）{
         返回ERR;
       }）;
}]）;
 

下面是我的控制器：

  app.controller（HomeController中'，['$范围'，'信息'，
 功能（$范围）{
    info.success（功能（数据）{
        $ scope.datar =数据;
  }）;
}]）;
 

这是我的看法：

 ＆LT; D​​IV CLASS =主＆GT;
  ＆LT; D​​IV CLASS =容器＆GT;
  ＆LT; D​​IV CLASS =照片＆GT;
  ＆LT; D​​IV NG控制器=HomeController的NG重复=数据DATAR＆GT;
    ＆LT; P1＆GT; {{data.age}}＆LT; / P1＆GT;
   ＆LT; P1＆GT; {{name.modified}}＆LT; / P1＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

既然要查询JSONP端点你需要使用的 $ http.jsonp 方法。而且非常重要：把 $ http.jsonp 的相同行收益，不然自动插入分号把它变成的回报; 基本返回未定义。

  app.factory（'信息'，['$ HTTP'，函数（$ HTTP）{
  返回$http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?&format=json&jsoncallback=JSON_CALLBACK')
      。然后（功能（响应）{
          返回response.data;
      }）;
}]）;
 

请注意参数名 jsoncallback ，不只是回调。

在您的控制器也应该使用然后，而不是成功的（它的德precated）：

  app.controller（HomeController中'，['$范围'，'信息'，函数（$范围，资讯）{
    info.then（功能（数据）{
        $ scope.datar =数据;
    }）;
}]）;
 

演示： http://plnkr.co/编辑/ yFomQ8jOZDRS6mZSBkGx？p = preVIEW

I am trying to parse data from a json file and display it in my angular application, but for some odd reason the view wouldn't show the data(intepret my expressions), I thought it might be my controller, but it looks fine. Any help would be appreciated in solving this, thanks.

Below is the code for my Http Service:

app.factory('info', ['$http', function($http){ 
  return 
  $http.get('https://api.flickr.com/services/feeds/photos_public.gne?&format=json&callback=JSON_CALLBACK')
      .success(function(data){
         return data;
      })
       .error(function(err){
         return err;
       });
}]);

Here is my controller:

app.controller('HomeController', ['$scope','info',
 function($scope) {
    info.success(function(data){
        $scope.datar = data;
  });  
}]);

And this is my view:

<div class="main" >
  <div class="container" >
  <div class="photo" >
  <div ng-controller="HomeController" ng-repeat="data in datar">
    <p1>{{data.age}}</p1>
   <p1>{{name.modified}}</p1>
  </div>
  </div>
  </div>
</div>

解决方案

Since you are querying JSONP endpoint you need to use $http.jsonp method. And very important: put $http.jsonp on the same line after return, otherwise automatic semicolon insertion turns it into return; basically returning undefined.

app.factory('info', ['$http', function($http) { 
  return $http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?&format=json&jsoncallback=JSON_CALLBACK')
      .then(function(response) {
          return response.data;
      });
}]);

Note parameter name jsoncallback, not just "callback".

After that your controller should also use then instead of success (it's deprecated):

app.controller('HomeController', ['$scope', 'info', function($scope, info) {
    info.then(function(data) {
        $scope.datar = data;
    });  
}]);

Demo: http://plnkr.co/edit/yFomQ8jOZDRS6mZSBkGx?p=preview

这篇关于显示JSON数据在角应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！