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

问题描述

我正在尝试解析 json 文件中的数据并将其显示在我的 angular 应用程序中，但由于某些奇怪的原因，视图不会显示数据(解释我的表达式)，我认为它可能是我的控制器，但它看起来不错.解决此问题的任何帮助将不胜感激，谢谢.

以下是我的 Http 服务代码:

app.factory('info', ['$http', function($http){返回$http.get('https://api.flickr.com/services/feeds/photos_public.gne?&format=json&callback=JSON_CALLBACK').成功(功能(数据){返回数据；}).错误(功能(错误){返回错误；});}]);

这是我的控制器:

app.controller('HomeController', ['$scope','info',功能($范围){信息.成功(功能(数据){$scope.datar = 数据；});}]);

这是我的观点:

<div class="container" ><div class="照片" ><div ng-controller="HomeController" ng-repeat="datar 中的数据"><p1>{{data.age}}</p1><p1>{{name.modified}}</p1>

解决方案

由于您正在查询 JSONP 端点，因此您需要使用 $http.jsonp 方法.非常重要的是:将 $http.jsonp 放在 return 之后的 same 行上，否则 自动分号插入 把它变成 return; 基本上返回 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(功能(响应){返回 response.data;});}]);

注意参数名称jsoncallback，而不仅仅是回调".

之后你的控制器也应该使用 then 而不是 success(它已被弃用):

app.controller('HomeController', ['$scope', 'info', function($scope, info) {信息.然后(功能(数据){$scope.datar = 数据；});}]);

演示: http://plnkr.co/edit/yFomQ8jOZDRS6mZSBkGx?p=预览

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

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