Menu
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_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
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_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
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.com/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);
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 community are:
FYI, Here is the latest commit to my Ionic app associated with this post on GitHub
876
I fixed this bug after finding a missing comma in my JSON file.
100
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
