印刷Flickr的API响应控制台AngularJS [英] Printing Flickr API Response to Console AngularJS

查看:164
本文介绍了印刷Flickr的API响应控制台AngularJS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前正在试图使API调用的工作,想看看它是否已经成功地从外部源返回API数据。


  1. 我如何打印输出,从app.js文件控制台,这样,在这种情况下,我可以看到API调用是否已返回?/有没有这样做,我'一个更好的办法中号失踪?


  2. 我应该使用$ http或$资源?


当前code:
JS / app.js

\r
\r

VAR应用= angular.module('图像浏览器',['NG',' ngResource']);\r
\r
  功能AppGallery($范围,$ HTTP){\r
    $ http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?').success(功能(数据){\r
      $ scope.data =数据;\r
      记录(数据);\r
    });\r
  };

\r

<!DOCTYPE HTML>\r
< HTML NG-应用=图像浏览器>\r
< HEAD>\r
  <标题>图片浏览器和LT; /标题>\r
  &所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js>&下; /脚本>\r
  &所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-resource.js>&下; /脚本>\r
  <脚本SRC =JS / app.js>< / SCRIPT>\r
< /头>\r
\r
<机身NG控制器=AppGallery>\r
\r
  {{数据}}\r
\r
< /身体GT;\r
< / HTML>

\r

\r
\r


解决方案

这实际工作有点不同。你必须定义回调函数jsonFlickrFeed。检查低于code。

您将在这里发现了两件事: -


  • 我们正在请求与参数?格式= JSON数据。 这里检查响应。

  • 您会注意到响应出来是寻找一个回调函数jsonFlickrFeed。只是定义了数据处理到这个功能,我们走吧。

\r
\r

VAR应用= angular.module('图像浏览器',['NG',' ngResource']);\r
\r
  app.controller('AppGallery',['$范围,$ HTTP',功能AppGallery($范围,$ HTTP){\r
    $ http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?format=json').success(功能(数据){\r
      \r
    });\r
\r
jsonFlickrFeed =功能(数据){\r
$ scope.data =数据;\r
的console.log(数据);\r
}\r
  }]);

\r

<!DOCTYPE HTML>\r
< HTML NG-应用=图像浏览器>\r
< HEAD>\r
  <标题>图片浏览器和LT; /标题>\r
  &所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js>&下; /脚本>\r
  &所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-resource.js>&下; /脚本>\r
  <脚本SRC =JS / app.js>< / SCRIPT>\r
< /头>\r
\r
<机身NG控制器=AppGallery>\r
\r
  {{数据}}\r
\r
< /身体GT;\r
< / HTML>

\r

\r
\r


  • 检查<一href=\"http://stackoverflow.com/questions/13854250/understanding-cross-domain-xhr-and-xml-data\">here和更多信息。


  • 如果你正在使用jQuery可以使用jQuery .getJSON代替的。 更多详细信息关于jQuery.getJSON。


希望这有助于!如果是这样,请标记为答案!谢谢!

I'm currently trying to make the API call work and want to see if it has managed to return the API data from the external source.

  1. How do I print an output to the console from the app.js file, so that in this case I can see whether the API call has been returned?/is there a better way of doing this that I'm missing?

  2. Should I be using $http or $resource?

Current code: js/app.js

var app = angular.module('imageViewer', ['ng', 'ngResource']);

  function AppGallery($scope, $http) {
    $http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?').success(function (data) {
      $scope.data = data;
      log(data);
    });
  }; 

<!DOCTYPE html>
<html ng-app="imageViewer">
<head>
  <title>Photo Viewer</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-resource.js"></script>
  <script src="js/app.js"></script>
</head>

<body ng-controller="AppGallery">

  {{data}}

</body>
</html>

解决方案

This actually works a bit differently. You will have to define the callback function jsonFlickrFeed. Check the code below.

You will notice two things here:-

  • We're requesting the data with parameter ?format=json. Check the response here.
  • You'd notice that the response coming out is looking for a callback function jsonFlickrFeed. Just define the handler for data into this function and there we go.

  var app = angular.module('imageViewer', ['ng', 'ngResource']);

  app.controller('AppGallery',[ '$scope','$http', function AppGallery($scope, $http) {
    $http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?format=json').success(function (data) {
      
    });
	
	jsonFlickrFeed = function(data){
	$scope.data = data;
	 console.log(data);
	}
  }]);

<!DOCTYPE html>
<html ng-app="imageViewer">
<head>
  <title>Photo Viewer</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-resource.js"></script>
  <script src="js/app.js"></script>
</head>

<body ng-controller="AppGallery">

  {{data}}

</body>
</html>

Hope this helps! Please mark as answer if it does! Thanks!

这篇关于印刷Flickr的API响应控制台AngularJS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆