角度资源将一维字符串数组解析为 2d答案

【问题标题】：One dimensional array of strings being parsed to 2d by angular resource角度资源将一维字符串数组解析为 2d
【发布时间】：2012-12-11 04:30:17
【问题描述】：

来自服务器的以下 JSON 响应

[
    "hello",
    "world"
]

正在被这个 ngResource 服务解析成二维数组

myService.factory('Name', function($resource){
    return $resource(site_url+'api/accounts/:accountId/names/', {}, {
        list: {method:'GET', params:{}, isArray:true}
    });
});

这样称呼

$scope.names = Name.list({accountId:$scope.account.id}, function(e){
    console.log(e);
});

追踪到

[{"0":"h","1":"e","2":"l","3":"l","4":"o"},{"0":"w","1":"o","2":"r","3":"l","4":"d"}]

有什么提示吗？

【问题讨论】：

如何转换响应见我的帖子：stackoverflow.com/a/22491240/626810

标签： json angularjs

【解决方案1】：

TLDR; ngResource 期望在您的响应中包含一个对象或对象数组。

当isArray 在操作列表中设置为true 时，ngResource 模块会遍历响应中收到的每个项目并创建一个新的资源实例。为此，Angular 在接收到的项目和Resource 类之间执行深层复制，这为我们提供了具有特殊方法（$save、$delete 等）的对象

检查source here。

Internally angular 使用 angular.copy 来执行深拷贝，当我们传递一个字符串时，这个函数只对 objects 和 arrays 起作用，它会将其视为对象。

JS 中的字符串可以通过提供对每个字符的顺序访问来充当数组。 angular.copy 将在传递字符串时产生以下内容

angular.copy('hi',{})   => {0:'h', 1:'i'}

每个字符都成为对象中的一个值，其索引设置为键。 ngResource 将提供具有属性0 和1 的资源。

您的选择是：

使用较低级别的$http服务

$http.get('/res').success(function(data){
  $scope.test = data;
});

在您的 json 响应中返回一个对象数组

[{'data': "hello"}, {'data': "world"}]

拦截响应并更改您的数据

如果您无法修改服务器发回的数据并想使用 ngResource，则需要转换响应。阅读如何做到这一点here

【讨论】：

谢谢 - 如果我早点遇到这个:)
谢谢，我花了 12 个小时寻找解决方案。多亏了你，我不会花 25 小时 :)。我正在返回一个对象，并且 isArray 设置为 false，但是我仍然遇到同样的问题。我通过仍然使用资源并按照您的建议将其放在服务器端的列表中来修复它。
isArray: false 不起作用，您需要将返回的字符串转换为对象检查此解决方案link

【解决方案2】：

我也一直在努力解决这个问题。这是我通过使用查询稍微调整服务的解决方案

var app = angular.module('testApp', ['ngResource']);

app.factory('Name', function($resource, $sce) {
  var path = "test.json";

  return $resource(path, {}, {
    query: {
      method: 'GET',
      isArray: false
    }
  })
});

app.controller('testController', function($scope, Name) {
  $scope.result;

  $scope.getResult = function() {
    Name.query(function(data) {
      $scope.result = data;
    });
  };

  $scope.getResult();
});

HTML：

<!DOCTYPE html>
<html ng-app="testApp">

<head>

  <link href="style.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>

  <script src="script.js"></script>
</head>

<body ng-controller="testController">
  <h1>{{result.surname}}</h1>

</body>

</html>

和 JSON 文件：

{
    "name": "Homer",
    "surname":  "Simpson",
    "Town": "Springfield"
}

如果有兴趣，也可以使用 Plunker：http://plnkr.co/edit/SwqlZyqZ4zfcpaLxaf39

希望这对某人有所帮助...

【讨论】：