javascript - Deserialise JSON String to Object with AngularJS using Generate Ionic

I am following this AngularJS Tutorial.

I am successfully able to display a data model array list in the browser (Chrome 37.0.2062.94) when instantiated using object literal notation, where $scope.sentences is of type "Object".

Controller: (extract)

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

View (extract):

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

But I get problems when I instead store this array of hashes in a JSON file (i.e. app/data/sentences.json), as follows:

sentences.JSON:

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

I attempt to use the AngularJS $http service to perform a HTTP GET request to fetch this JSON data. The tutorial mentions that AngularJS detects and parses the JSON response automatically and that the $http service returns a promise object with a success method. So I assumed that the following code would work correctly such that $scope.sentences would be of type "Object", however it informs me that it is of type "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");
    });

So I attempted to assign it with this following code instead, which gives the following error:

$scope.sentences = angular.fromJson(data);

SyntaxError: Unexpected token ;
    at Object.parse (native)
    at Object.fromJson (http://127.0.0.1:9000/bower_ponents/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_ponents/angular/angular.js:8105:11
    at wrappedCallback (http://127.0.0.1:9000/bower_ponents/angular/angular.js:11561:81)
    at wrappedCallback (http://127.0.0.1:9000/bower_ponents/angular/angular.js:11561:81)
    at http://127.0.0.1:9000/bower_ponents/angular/angular.js:11647:26
    at Scope.$eval (http://127.0.0.1:9000/bower_ponents/angular/angular.js:12673:28)
    at Scope.$digest (http://127.0.0.1:9000/bower_ponents/angular/angular.js:12485:31)
    at Scope.$apply (http://127.0.0.1:9000/bower_ponents/angular/angular.js:12777:24) angular.js:10061

I try the below alternative with quotations included, which gives the following error (which is getting confused with the letter 'd' in the word 'data') :

$scope.sentences = angular.fromJson('data');

SyntaxError: Unexpected token d
    at Object.parse (native)
    at Object.fromJson (http://127.0.0.1:9000/bower_ponents/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_ponents/angular/angular.js:8105:11
    at wrappedCallback (http://127.0.0.1:9000/bower_ponents/angular/angular.js:11561:81)
    at wrappedCallback (http://127.0.0.1:9000/bower_ponents/angular/angular.js:11561:81)
    at http://127.0.0.1:9000/bower_ponents/angular/angular.js:11647:26
    at Scope.$eval (http://127.0.0.1:9000/bower_ponents/angular/angular.js:12673:28)
    at Scope.$digest (http://127.0.0.1:9000/bower_ponents/angular/angular.js:12485:31)
    at Scope.$apply (http://127.0.0.1:9000/bower_ponents/angular/angular.js:12777:24) angular.js:10061

I try this third alternative, which gives the same as the previous error:

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

I try a fourth alternative, which also gives the same as the previous error:

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

With little hope left I came across this [lifesaver post] () that mentioned using eval('data'), but which also mentions that it presents a security risk, but I gave it a shot with:

$scope.sentences = eval(data);

And this works!! It successfully grabs and displays the data from the JSON file as a list in the browser. Note that when I check what it assigns with console.log(eval(data)); it gives me [object Object],[object Object],[object Object],[object Object]

But I can't celebrate because I don't understand why the other alternatives that I tried didn't work...

So my questions to the munity are:

Why doesn't the AngularJS $http service detect and parses the JSON response automatically and return it as an Object (instead of a String)?
Why doesn't the AngularJS fromJSON deserialize the JSON string without an error? (which appears to simply perform JSON.parse('') according to its Source Code)
Is my JSON encoding petent and are my inputs incorrectly validated in this simple example? Is this why only the unsafe 'eval' method works for me (with its associated security risks)?

FYI, Here is the latest mit to my Ionic app associated with this post on GitHub

I am following this AngularJS Tutorial.

I am successfully able to display a data model array list in the browser (Chrome 37.0.2062.94) when instantiated using object literal notation, where $scope.sentences is of type "Object".

Controller: (extract)

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

View (extract):

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

But I get problems when I instead store this array of hashes in a JSON file (i.e. app/data/sentences.json), as follows:

sentences.JSON:

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

  $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");
    });

So I attempted to assign it with this following code instead, which gives the following error:

$scope.sentences = angular.fromJson(data);

SyntaxError: Unexpected token ;
    at Object.parse (native)
    at Object.fromJson (http://127.0.0.1:9000/bower_ponents/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_ponents/angular/angular.js:8105:11
    at wrappedCallback (http://127.0.0.1:9000/bower_ponents/angular/angular.js:11561:81)
    at wrappedCallback (http://127.0.0.1:9000/bower_ponents/angular/angular.js:11561:81)
    at http://127.0.0.1:9000/bower_ponents/angular/angular.js:11647:26
    at Scope.$eval (http://127.0.0.1:9000/bower_ponents/angular/angular.js:12673:28)
    at Scope.$digest (http://127.0.0.1:9000/bower_ponents/angular/angular.js:12485:31)
    at Scope.$apply (http://127.0.0.1:9000/bower_ponents/angular/angular.js:12777:24) angular.js:10061

I try the below alternative with quotations included, which gives the following error (which is getting confused with the letter 'd' in the word 'data') :

$scope.sentences = angular.fromJson('data');

SyntaxError: Unexpected token d
    at Object.parse (native)
    at Object.fromJson (http://127.0.0.1:9000/bower_ponents/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_ponents/angular/angular.js:8105:11
    at wrappedCallback (http://127.0.0.1:9000/bower_ponents/angular/angular.js:11561:81)
    at wrappedCallback (http://127.0.0.1:9000/bower_ponents/angular/angular.js:11561:81)
    at http://127.0.0.1:9000/bower_ponents/angular/angular.js:11647:26
    at Scope.$eval (http://127.0.0.1:9000/bower_ponents/angular/angular.js:12673:28)
    at Scope.$digest (http://127.0.0.1:9000/bower_ponents/angular/angular.js:12485:31)
    at Scope.$apply (http://127.0.0.1:9000/bower_ponents/angular/angular.js:12777:24) angular.js:10061

I try this third alternative, which gives the same as the previous error:

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

I try a fourth alternative, which also gives the same as the previous error:

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

With little hope left I came across this [lifesaver post] (https://stackoverflow./a/6487190/3208553) that mentioned using eval('data'), but which also mentions that it presents a security risk, but I gave it a shot with:

$scope.sentences = eval(data);

But I can't celebrate because I don't understand why the other alternatives that I tried didn't work...

So my questions to the munity are:

Why doesn't the AngularJS $http service detect and parses the JSON response automatically and return it as an Object (instead of a String)?
Why doesn't the AngularJS fromJSON deserialize the JSON string without an error? (which appears to simply perform JSON.parse('') according to its Source Code)
Is my JSON encoding petent and are my inputs incorrectly validated in this simple example? Is this why only the unsafe 'eval' method works for me (with its associated security risks)?

FYI, Here is the latest mit to my Ionic app associated with this post on GitHub

Share Improve this question edited May 23, 2017 at 10:29 CommunityBot 11 silver badge asked Sep 14, 2014 at 1:36 Luke Schoen 4,5432 gold badges32 silver badges26 bronze badges

6 get rid of the ; at the very end of your JSON. The string should always start and end with braces. When in doubt, paste it into jsonlint. to validate. JSON parsers will break if anything is irregular. – charlietfl Commented Sep 14, 2014 at 1:44
@charlietfl Thanks for the correct solution, JSONLint correctly identified the semi-colon problem. I removed the semi-colon at the end of the JSON file, and now I can simply use $scope.sentences = data; (preferred) or alternatively $scope.sentences = angular.fromJson(data); without errors. I have made a pull request Here to hopefully improve the AngularJS Tutorial experience for others. – Luke Schoen Commented Sep 14, 2014 at 4:58

Add a ment |

1 Answer 1

Sorted by: Reset to default 1

I fixed this bug after finding a missing ma in my JSON file.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745197605a4616170.html

javascript - Deserialise JSON String to Object with AngularJS using Generate Ionic - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Deserialise JSON String to Object with AngularJS using Generate Ionic - Stack Overflow

1 Answer 1

相关推荐