在 AngularJS 中解析 JSONP 文件答案

【问题标题】：Parsing a JSONP file in AngularJS在 AngularJS 中解析 JSONP 文件
【发布时间】：2015-06-07 21:47:55
【问题描述】：

我是 Angular 的新手，对 JSONP 格式也比较陌生。在我的代码中，我设置了一个工厂来读取 JSONP 文件 - 我正确地将数据变量作为 JSONP 数据取回

$http.get('someJSONFile').success(function(data){
    console.log(data);
});

控制台日志返回以下信息：

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"}])

所以 - 我不知道现在该做什么。我有一个包含函数的数据对象。我需要从这个函数中解析出 JSON - 但不知道该怎么做。

我在其他地方读到我需要在我的控制器或工厂的某处声明一个函数

function states(results)
{
    // what is in results should be the JSON data I crave
}

但即使我这样做了，我认为它永远不会执行 - 所以我不确定当时我应该怎么做才能将 JSON 数据放入我可以使用的对象中。

我要解析的完整文件是http://massachusettswebdesigns.com/states.json

感谢任何帮助！

【问题讨论】：

是的，我认为您可以调用try {eval(data) } catch (e) {}，然后在您的states 函数中输入console.log(results) 看看会发生什么。

标签： javascript json angularjs jsonp

【解决方案1】：

Angular $http 服务提供了一个 method 来使用 JSONP 端点。在您的情况下，这应该有效：

$http.jsonp('someJSONFile').then(function(data) {
    console.log(data)
});

在幕后，Angular 将创建一个全局可访问的函数，该函数将接收数据、解析并进一步传递，因此您无需担心自己创建函数。

【讨论】：

好的，现在我收到一个未定义状态的错误
是你自己的服务吗？它不是真正的 JSONP，您不应该硬编码 states 函数作为响应。相反，您应该从客户端获取回调的任何 GET 参数并用它包装 JSON 数据。
不——不是我的服务，这就是问题所在。
有没有办法说你想使用不同的功能？这个服务是可配置的吗？我检查了它不理解 GET 参数callback，可能是不同的？否则你将不得不创建全局函数状态。

【解决方案2】：

看起来您尝试做的是标准 JSON 而不是 JSONP，JSONP 将需要回调，并且仅在从不同域（即 API 服务）获取数据时才需要

您提供的控制台日志输出也是无效的 JSON。

//init app
var app = angular.module('MyApp',[]);

//setup a factory for the data handling

app.factory("Data",function($http){
return {

   getData:function(type){

   return $http.get(type).
       then(function(result) {
           return result.data;
       });
   }
}
});

//in a controller 'call' the factory for the data

app.controller('main', function main($scope, Data) {

//other stuff

Data.getData('someJSONFile').then(function (data) {
    $scope.jsonData = JSON.parse(data);
});

//other stuff
});

【讨论】：

好的，这让我得到了请求资源上没有“Access-Control-Allow-Origin”标头的部分，错误。我可以通过使用允许我覆盖跨源错误的 Chrome 插件来解决这个问题。但是现在当我解析文件时，我得到一个 SyntaxError: Unexpected token s 错误，当它尝试解析状态时。我要解析的文件是massachusettswebdesigns.com/states.json
根据数据格式，您可能不需要解析它，即如果不是字符串，则更改行 $scope.jsonData = JSON.parse(data);到 $scope.jsonData = 数据；

【解决方案3】：

所以我的错误是愚蠢的。 JSON 文件为我提供了我必须定义的自定义回调的名称。一旦我这样做了，一切都奏效了。 . . .这是代码

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

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


}]) // end of MainCtrl

【讨论】：