1

I am trying to obtain a .json file from remote firebase server.

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.
        }
    );
}

But If I open url in the browser the json file loads. Even if I wget url the json file loads. But through angular it returns a 404 not found.

Now the .json remote file has this structure:

[
  { 
    "hello":"Europe"
  },

  {
    "hello":"USA"
  }
]

The above file can be fetched using $http.get() but not with $http.jsonp(). JSONP cant parse .json file with the above structure. How can I work around this?

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
InfinitePrime
  • 1,718
  • 15
  • 18

1 Answers1

1

You need to specify a ?callback=JSON_CALLBACK in the URL that you pass to $http.jsonp.

From 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.

That last line is what you're missing.

A simple example (using a Firebase database, not Firebase hosting):

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)
    }
  );  
});

In case you want to see it working: http://jsbin.com/robono/1/watch?js,console

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • It is still returning 404. What on earth is happening? – InfinitePrime Aug 30 '14 at 05:52
  • The link you have provided through jsbin for firebase works. But why not mine? Is some kind of unique setup required to host JSON files on firebase. – InfinitePrime Aug 30 '14 at 09:40
  • You didn't share your `remoteJsonId`, so I can't be sure. But I highly suspect that you simply forgot to add `?callback=JSON_CALLBACK` to the end of the URL, which is what the first line of my answer says. I did nothing else except the minimum to make your code work. If this doesn't solve it for you, I propose that you set up a fiddle/bin that reproduces your problem. – Frank van Puffelen Aug 30 '14 at 13:07
  • I did add ?callback=JSON_CALLBACK. See the edit. There is a new problem now. – InfinitePrime Aug 30 '14 at 13:30
  • Ok I will do it. Can you look at why jsonp cant parse a .json file with the structure I have mentioned above. Or should I open a new question for that? – InfinitePrime Aug 30 '14 at 13:40
  • It parses such a structure fine for me: http://jsbin.com/musej/1/watch?js,console. If you keep having that array-parsing problem, open a new question. But only do so if you can give us a minimal reproduction of your problem. So far, I have been unable to reproduce your problems. So: set up a jsfiddle or jsbin showing your problem and it'll be a lot easier to see where you're going wrong and help you. – Frank van Puffelen Aug 30 '14 at 13:46
  • Ok. I will do that. Thanks Frank van Puffelen. – InfinitePrime Aug 30 '14 at 13:51