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

标签 javascript json angularjs deserialization

我正在关注这个 AngularJS Tutorial .

当使用对象文字表示法实例化时,我能够在浏览器 (Chrome 37.0.2062.94) 中成功显示数据模型数组列表,其中 $scope.sentences 是“对象”类型。

Controller :(提取)

'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/sentences.json)中时,我遇到了问题,如下所示:

句子.JSON:

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

我尝试使用 AngularJS $http 服务执行 HTTP GET 请求以获取此 JSON 数据。本教程提到 AngularJS 会自动检测和解析 JSON 响应,并且 $http 服务会返回一个带有成功方法的 promise 对象。所以我假设下面的代码可以正常工作,这样 $scope.sentences 将是“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

我尝试了以下包含引号的替代方案,它给出了以下错误(与“数据”一词中的字母“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');

在希望渺茫的情况下,我看到了这篇提到使用 eval('data') 的 [救星帖子] ( https://stackoverflow.com/a/6487190/3208553 ),但也提到它存在安全风险,但我试了一下:

$scope.sentences = eval(data);

这有效!!它成功地从 JSON 文件中抓取数据并将其显示为浏览器中的列表。请注意,当我检查它分配的内容时 console.log(eval(data));它给了我 [object Object],[object Object],[object Object],[object Object]

但我不能庆祝,因为我不明白为什么我尝试过的其他替代方案不起作用...

所以我对社区的问题是:

  1. 为什么 AngularJS $http 服务不自动检测和解析 JSON 响应并将其作为对象(而不是字符串)返回?
  2. 为什么 AngularJS 没有 fromJSON反序列化 JSON 字符串没有错误? (它似乎只是根据其 Source Code 执行 JSON.parse('') )
  3. 在这个简单的示例中,我的 JSON 编码是否合格?我的输入是否被错误地验证了?这就是为什么只有不安全的“评估”方法对我有效(具有相关的安全风险)吗?

仅供引用,Here是与 GitHub 上的这篇文章相关的对我的 Ionic 应用程序的最新提交

最佳答案

在我的 JSON 文件中发现缺少逗号后,我修复了这个错误。

关于javascript - 使用 Generate Ionic 使用 AngularJS 将 JSON 字符串反序列化为对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25829315/

相关文章:

javascript - 似乎无法循环遍历对象键

javascript - typescript :对象到类

javascript - page.evaluate() 是否存在 phantomJS 注入(inject)漏洞?

java - JSONException 字符串无法转换为 JSONArray

json - 嵌套数组在realm.create中抛出错误(值: JSON) for Swift

javascript - 使用 JavaScript 或 TypeScript 的 Angular 2.0?

javascript - 如何使用下面的 JQuery 代码显示元素?

javascript - 如何使用app.locals。 JavaScript 中的参数?

angularjs - 如何禁用对 Ag-grid 中特定列的排序?

javascript - 在 Angular 中处理非幂等 $http 请求