在回调AngularJS着访问JSON响应 [英] cant access JSON response in callback AngularJS

问题描述

在我的网片我看到回来的答复，但我不能让访问数据由于某种原因。

下面是直接链接： https://github.com/users/gigablox/contributions_calendar_data

的采用了棱角分明1.2 RC2。尝试了几种不同的方法... 的

$ HTTP

  VAR URL =htt​​ps://github.com/users/gigablox/contributions_calendar_data?callback=JSON_CALLBACK;
$ http.jsonp（URL）.success（功能（数据）{
    的console.log（数据）;
}）;
 

$资源

  VAR手柄= $资源（'https://github.com/users/gigablox/contributions_calendar_data'，{}，{
  得到：{
    方法：'JSONP'，
    IsArray的：假的，//响应包装成一个阵列。试真假
    PARAMS：{回调：JSON_CALLBACK'}
  }
}）;handle.get（）。$ promise.then（
功能（数据）{
    的console.log（数据）;
}）。
功能（错误）{
    的console.log（错误）; //未定义的，但200 OK响应上？
}）;
 

解决方案

这里的问题是，你请求一个平面文件，因此服务器不会由<$ C $指定的JavaScript函数调用包装中的数据C> jsonp_callback 查询参数。另外CORS是preventing您获取直接使用文件$ HTTP / XHR。

在一般情况下，如果你使用$ http.jsonp指定的回调函数需要驻留在全球范围内，然后你需要重新angularify响应数据。

下面是一个使用这个词preSS API的示例： http://jsfiddle.net/Rjfre/23 /

HTML

 ＆LT; D​​IV NG控制器=MyCtrlID ='煤制油'＆GT;
  ＆LT; H2 NG秀=数据＆GT;从回调＆LT数据; / H＆GT;
  ＆LT; pre＆GT; {{}数据}＆LT; / pre＆GT;  ＆LT; H2 NG秀=成功＆GT;成功与LT; / H＆GT;
  ＆LT; pre＆GT; {{成功}}＆LT; / pre＆GT;  ＆LT; H2 NG隐藏=数据＆GT;错误＆LT; / H＆GT;
  ＆LT; pre＆GT; {{错误}}＆LT; / pre＆GT;
＆LT; / DIV＆GT;
 

SCRIPT

  VAR对myApp = angular.module（'对myApp'，[]）;功能MyCtrl（$范围，$ HTTP）{
    $ scope.name ='超级英雄';
VAR URL = \"http://public-api.word$p$pss.com/rest/v1/sites/wtmpeachtest.word$p$pss.com/posts?callback=jsonp_callback\";$ http.jsonp（URL）。然后（
        功能（多个）{$ scope.success = JSON.stringify（多个）; }，
        功能（五）{$ scope.error = JSON.stringify（E）; }）;
}功能jsonp_callback（数据）{
    VAR EL =的document.getElementById（'煤制油'）;
    VAR范围= angular.element（EL）.scope（）;
    范围。$应用（函数（）{
        scope.data = JSON.stringify（数据）;
    }）;
}
 

In my net tab I am seeing the responses coming back but I can't get access to the data for some reason.

Here is the direct link: https://github.com/users/gigablox/contributions_calendar_data

Using Angular 1.2 rc2. Tried a couple different ways...

$http

var url = "https://github.com/users/gigablox/contributions_calendar_data?callback=JSON_CALLBACK";
$http.jsonp(url).success(function(data){
    console.log(data);
});  

$resource

var handle = $resource('https://github.com/users/gigablox/contributions_calendar_data',{},{
  get:{
    method:'JSONP',
    isArray: false, //response is wrapped as an array. tried true and false
    params:{callback:'JSON_CALLBACK'}
  }
});

handle.get().$promise.then(
function(data){
    console.log(data);
}).
function(error){
    console.log(error); //undefined but 200 OK on response?
});

解决方案

The problem here is that you are requesting a flat file, so the server isn't wrapping the data in the javascript function call specified by the jsonp_callback querystring parameter. Further CORS is preventing you from fetching the file directly using $http/xhr.

In general, if you use $http.jsonp the specified callback function needs to reside in the global scope, and then you need to 're-angularify' the response data.

Here's an example using the wordpress api: http://jsfiddle.net/Rjfre/23/

HTML

<div ng-controller="MyCtrl" id='ctl'>
  <h2 ng-show="data">Data from callback</h2>
  <pre>{{data}}</pre>

  <h2 ng-show="success">Success</h2>
  <pre>{{success}}</pre>

  <h2 ng-hide="data">Error</h2>
  <pre>{{error}}</pre>
</div>

SCRIPT

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $http) {
    $scope.name = 'Superhero';
var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback";

$http.jsonp(url).then(
        function(s) { $scope.success = JSON.stringify(s); }, 
        function(e) { $scope.error = JSON.stringify(e); } );
}

function jsonp_callback(data) {
    var el = document.getElementById('ctl');
    var scope = angular.element(el).scope();
    scope.$apply(function() {
        scope.data = JSON.stringify(data);
    });
}

这篇关于在回调AngularJS着访问JSON响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！