在 AngularJS 中解析 JSONP 文件

Posted 2023-03-03

【中文标题】在 AngularJS 中解析 JSONP 文件

【英文标题】：Parsing a JSONP file in AngularJS

【发布时间】：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) 看看会发生什么。

【参考方案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