通过Angular从Firebase托管中获取JSONP文件

时间:2014-08-29 08:12:20

标签: javascript json angularjs firebase-hosting

我正在尝试从远程firebase服务器获取.json文件。

function fetchData(remoteJsonId){
    var url = "https://myAppName.firebaseapp.com/topics/"+remoteJsonID;
    console.log(url); //This variable expands to the full domain name which is valid and                       returns success both on wget and the browser
    $http.jsonp(url).then(
        function(resp){

        },
        function(err){
            console.log(err.status) // This posts "404" on console.
        }
    );
}

但是如果我在浏览器中打开url,则会加载json文件。即使我wget url json文件加载。但通过角度,它会返回404未找到。

现在.json远程文件具有以下结构:

[
  { 
    "hello":"Europe"
  },

  {
    "hello":"USA"
  }
]

上述文件可以使用$ http.get()获取,但不能使用$ http.jsonp()获取。 JSONP无法使用上述结构解析.json文件。我该如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

您需要在传递给?callback=JSON_CALLBACK的网址中指定$http.jsonp

来自Angular's $http.jsonp documentation

jsonp(url, [config]);
Shortcut method to perform JSONP request.

Parameters
Param   Type    Details
url     string  
Relative or absolute URL specifying the destination of the request.
The name of the callback should be the string JSON_CALLBACK.

最后一行是你所缺少的。

一个简单示例(使用Firebase数据库,而不是Firebase托管):

var app = angular.module('myapp', []);
app.controller('mycontroller', function($scope, $http) {
  var url = 'https://yourfirebase.firebaseio.com/25564200.json';
  $http.jsonp(url+'?callback=JSON_CALLBACK').then(
    function(resp){
      console.log(resp.data); // your object is in resp.data
    },
    function(err){
        console.error(err.status)
    }
  );  
});

如果您希望看到它正常工作:http://jsbin.com/robono/1/watch?js,console