Need help with loading in JSONP File using Angular

[Ryan DesRoches]

Hi Guys,

I am rather new to Angular and new to JSONP as well, which is probably why I am having problems, and I am hoping someone can point me in the right direction. 

I have a file that is a JSONP file that can be accessed here:  http://massachusettswebdesigns.com/states-jsonp.json

The format/output of the file is below: 

states([{"code":"AL","name":"Alabama"},{"code":"AK","name":"Alaska"},{"code":"AZ","name":"Arizona"},{"code":"AR","name":"Arkansas"},{"code":"CA","name":"California"},{"code":"CO","name":"Colorado"},{"code":"CT","name":"Connecticut"},{"code":"DE","name":"Delaware"},{"code":"DC","name":"District Of Columbia"},{"code":"FL","name":"Florida"},{"code":"GA","name":"Georgia"},{"code":"HI","name":"Hawaii"},{"code":"ID","name":"Idaho"},{"code":"IL","name":"Illinois"},{"code":"IN","name":"Indiana"},{"code":"IA","name":"Iowa"},{"code":"KS","name":"Kansas"},{"code":"KY","name":"Kentucky"},{"code":"LA","name":"Louisiana"},{"code":"ME","name":"Maine"},{"code":"MD","name":"Maryland"},{"code":"MA","name":"Massachusetts"},{"code":"MI","name":"Michigan"},{"code":"MN","name":"Minnesota"},{"code":"MS","name":"Mississippi"},{"code":"MO","name":"Missouri"},{"code":"MT","name":"Montana"},{"code":"NE","name":"Nebraska"},{"code":"NV","name":"Nevada"},{"code":"NH","name":"New Hampshire"},{"code":"NJ","name":"New Jersey"},{"code":"NM","name":"New Mexico"},{"code":"NY","name":"New York"},{"code":"NC","name":"North Carolina"},{"code":"ND","name":"North Dakota"},{"code":"OH","name":"Ohio"},{"code":"OK","name":"Oklahoma"},{"code":"OR","name":"Oregon"},{"code":"PA","name":"Pennsylvania"},{"code":"RI","name":"Rhode Island"},{"code":"SC","name":"South Carolina"},{"code":"SD","name":"South Dakota"},{"code":"TN","name":"Tennessee"},{"code":"TX","name":"Texas"},{"code":"UT","name":"Utah"},{"code":"VT","name":"Vermont"},{"code":"VA","name":"Virginia"},{"code":"WA","name":"Washington"},{"code":"WV","name":"West Virginia"},{"code":"WI","name":"Wisconsin"},{"code":"WY","name":"Wyoming"}])

I just can't figure out how to load this in correctly and parse it.    If it was in standard JSON - its no problem - I just read it in whith an $http method and save the returned data as an object and go from there.

With JSONP though - it seems just a little more complex.   I think I either need to set up a callback or something to execute the states function,  but I am just lost at how to do that. 

Here is the angular Code that I have reading in a standard JSON file now:

In the main-controller.js

'use strict'; angular.module('locationApp') .controller('MainCtrl', function ($scope, ReadJson)
{

    // Variable setup
    $scope.states = [];
 
    // Get the States
    ReadJson.getJson('http://massachusettswebdesigns.com/states.json').then(function (data) {
        $scope.states=data;
        console.log("States " + $scope.states);

    }); // end of getJson for states

});

And then the factory that has the ReasJson Function:

angular.module('locationApp').
factory("ReadJson", ['$http', function ReadJsonFactory($http)
{
 return {
 // GetJson -  Gets a JSON based URL and returns it as an object.
 getJson:function(url)
 {
    return $http.get(url).then(function (result)
    {
     // console.log("Result = " + result.data);
            return result.data;
        });
 
 }
 }
}]);

Again, no problem when reading in the states.json file (which is regular JSON) -  however when I try to read in the JSONP file  (http://massachusettswebdesigns.com/states-jsonp.json)

I get a syntax error:

SyntaxError: Unexpected token s

    at Object.parse (native)

    at fromJson (http://localhost:9000/bower_components/angular/angular.js:1072:14)

    at defaultHttpResponseTransform (http://localhost:9000/bower_components/angular/angular.js:8618:16)

    at http://localhost:9000/bower_components/angular/angular.js:8703:12

    at forEach (http://localhost:9000/bower_components/angular/angular.js:323:20)

    at transformData (http://localhost:9000/bower_components/angular/angular.js:8702:3)

    at transformResponse (http://localhost:9000/bower_components/angular/angular.js:9428:23)

    at processQueue (http://localhost:9000/bower_components/angular/angular.js:13248:27)

    at http://localhost:9000/bower_components/angular/angular.js:13264:27

    at Scope.$get.Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:14466:28)

If I change the factory to use $http.jsonp(url)   Then I get an error stating "states is undefined".    So I am stumped . . . 

Any ideas?  

[Sander Elias]

quick question, did you try $http.jsonp?

[Ryan DesRoches]

Yeah - I have.    When I use JSONP and ask to read in the http://massachusettswebdesigns.com/states-jsonp.json file,  I get states is not defined error.

Here's the factory code with the JSONP use:

angular.module('locationApp').
factory("ReadJson", ['$http', function ReadJsonFactory($http)
{
 return {
 // GetJson -  Gets a JSON based URL and returns it as an object.
 getJson:function(url)
 {

    return $http.jsonp(url).then(function (result)
    {

     console.log("Result = " + result.data);
            return result.data;
        });
 
 }
 }
}]);

Again, stumped on this one. . . 

Ryan

[Ryan DesRoches]

Found my problem!  The file was using its own callback called States.  I just had to create the callbacks and all was well.   Below is the code :)

angular.module('locationApp')
  .controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {


    $scope.states = [];
    $scope.cities = [];


    // Function for the States callback on the JSON files provided
    window.states = function (data)
    {
      $scope.states = data;
    };


    // function for the cities callback on the JSON files proviced
    window.cities = function (data)
    {
      $scope.cities = data;
    };


     // Get the State JSON file.  
    $http.jsonp('http://locationinc-mapping-demo.herokuapp.com/states.json');


}]) // end of MainCtrl