使用Generate Ionic使用AngularJS将JSON字符串反序列化为对象

Deserialise JSON String to Object with AngularJS using Generate Ionic

本文关键字：使用 反序列化 对象 字符串 Generate Ionic AngularJS JSON      更新时间：2023-09-26

我正在学习AngularJS教程。

当使用object literal表示法实例化时，我能够成功地在浏览器（Chrome 37.0.2062.94）中显示数据模型数组列表，其中$scope.sents的类型为"object"。

控制器：（提取）

'use strict';
angular.module('YeomanIonic.controllers', [])
.controller('MapCtrl', ['$scope', '$ionicLoading', '$http', function($scope, $ionicLoading, $http) {
$scope.sentences = [
  {"name": "Hello",
   "snippet": "1"
  },
  {"name": "Goodbye", 
   "snippet": "2"
  }
];
}]);

视图（摘录）：

  <body ng-app="YeomanIonic" ng-controller="MapCtrl">
            <ul>
              <li ng-repeat="sentence in sentences">
                <span>{{sentence.name}}</span>
                <p>{{sentence.snippet}}</p>
              </li>
            </ul>

但是，当我将这个散列数组存储在JSON文件（即app/data/catents.JSON）中时，我会遇到问题，如下所示：

句子。JSON:

[
  {"name": "Hello",
   "snippet": "1"
  },
  {"name": "Goodbye", 
   "snippet": "2"
  }
];

我尝试使用AngularJS$http服务来执行HTTPGET请求以获取此JSON数据。教程提到AngularJS自动检测和解析JSON响应，$http服务返回一个带有成功方法的promise对象。因此，我假设以下代码可以正确工作，这样$scope.pensions的类型将是"Object"，但它通知我它的类型是"String"。

  $http({
    method: 'GET', 
    url: 'data/sentences.json'
  }).
    success(function(data, status, headers, config) {
      console.log("HTTP Request - Success");
      $scope.sentences = data;
      console.log(typeof($scope.sentences));
    }).
    error(function(data, status, headers, config) {
      console.log("HTTP Request - Error");
    });

所以我尝试用下面的代码来分配它，这给出了以下错误：

$scope.sentences = angular.fromJson(data);
SyntaxError: Unexpected token ;
    at Object.parse (native)
    at Object.fromJson (http://127.0.0.1:9000/bower_components/angular/angular.js:1139:14)
    at http://127.0.0.1:9000/scripts/controllers.js:34:59
    at http://127.0.0.1:9000/bower_components/angular/angular.js:8105:11
    at wrappedCallback (http://127.0.0.1:9000/bower_components/angular/angular.js:11561:81)
    at wrappedCallback (http://127.0.0.1:9000/bower_components/angular/angular.js:11561:81)
    at http://127.0.0.1:9000/bower_components/angular/angular.js:11647:26
    at Scope.$eval (http://127.0.0.1:9000/bower_components/angular/angular.js:12673:28)
    at Scope.$digest (http://127.0.0.1:9000/bower_components/angular/angular.js:12485:31)
    at Scope.$apply (http://127.0.0.1:9000/bower_components/angular/angular.js:12777:24) angular.js:10061

我尝试了以下包含报价的替代方案，这会出现以下错误（与单词"data"中的字母"d"混淆）：

$scope.sentences = angular.fromJson('data');
SyntaxError: Unexpected token d
    at Object.parse (native)
    at Object.fromJson (http://127.0.0.1:9000/bower_components/angular/angular.js:1139:14)
    at http://127.0.0.1:9000/scripts/controllers.js:34:59
    at http://127.0.0.1:9000/bower_components/angular/angular.js:8105:11
    at wrappedCallback (http://127.0.0.1:9000/bower_components/angular/angular.js:11561:81)
    at wrappedCallback (http://127.0.0.1:9000/bower_components/angular/angular.js:11561:81)
    at http://127.0.0.1:9000/bower_components/angular/angular.js:11647:26
    at Scope.$eval (http://127.0.0.1:9000/bower_components/angular/angular.js:12673:28)
    at Scope.$digest (http://127.0.0.1:9000/bower_components/angular/angular.js:12485:31)
    at Scope.$apply (http://127.0.0.1:9000/bower_components/angular/angular.js:12777:24) angular.js:10061

我尝试了第三种选择，它给出了与前一个错误相同的错误：

$scope.sentences = window.JSON.parse('data');

我尝试了第四种选择，它也给出了与前一个错误相同的错误：

$scope.sentences = JSON.parse('data');

在几乎没有希望的情况下，我遇到了这个[救命稻草](https://stackoverflow.com/a/6487190/3208553)提到使用eval（"data"），但也提到它存在安全风险，但我尝试了一下：

$scope.sentences = eval(data);

这很管用！！它成功地捕获了JSON文件中的数据，并将其显示为浏览器中的列表。请注意，当我用console.log（eval（data））检查它分配的内容时；它给了我[对象对象]，[对象对象对象]

但我不能庆祝，因为我不明白为什么我尝试的其他选择都不起作用。。。

因此，我向社区提出的问题是：

  1. 为什么AngularJS$http服务不自动检测和解析JSON响应，并将其作为Object（而不是String）返回
  2. 为什么来自JSON的AngularJS不能在没有错误的情况下反序列化JSON字符串？（它似乎只是根据其源代码执行JSON.parse（"））
  3. 在这个简单的例子中，我的JSON编码是否有效？我的输入是否被错误地验证了？这就是为什么只有不安全的"eval"方法对我有效（及其相关的安全风险）吗

仅供参考，这是我的Ionic应用程序的最新承诺，与GitHub 上的这篇文章相关

我在JSON文件中发现一个丢失的逗号后修复了这个错误。

相关文章：