briefing: When reading a JSON file from angularJS, it loads but it pass some time until data is available or something strange similar.
The JSON is:
{
"number": 1,
"persons":[
{
"gender": "Male",
"name": "Paul",
}
]
}
The angular code is:
app.controller('myapp', function($scope,$http){
var folder = 'DB/';
$http.get(folder+'database.json').success(function(data){
$scope.DataBase= data;
});
console.log($scope);
$scope.getname= function(){
return $scope.DataBase.persons[0].name;
}
The html is:
<body>
<div class="d_name" ng-controller="myapp">
{{getname()}}
</div>
</body>
What I don't understand is why the console.log($scope) just after getting the JSON shows that there is the object DataBase but the function getname() gives two errors before it works, is like if for a while the scope wasn't update and the getname function isn't finding the object, but then why the log is showing it?
The console:
ChildScope {$$childTail: null, $$childHead: null, $$nextSibling: null, $$watchers: null, $$listeners: Object…}
$$ChildScope: null
$$childHead: null
$$childTail: null
$$listenerCount: Object
$$listeners: Object
$$nextSibling: ChildScope
$$prevSibling: null
$$watchers: Array[3]
$$watchersCount: 3
$id: 4
$parent: ChildScope
DataBase: Object
persons: Array[1]
number: 1
__proto__: Object
getgen: ()
getimg: ()
getname: ()
__proto__: ChildScope
ionic.bundle.js:21157
TypeError: Cannot read property 'persons' of undefined
at Scope.$scope.getname (http://localhost:63342/test/www/js/controllers/c_menu.js:27:35)
at fn (eval at <anonymous> (http://localhost:63342/test/www/lib/ionic/js/ionic.bundle.js:21972:15), <anonymous>:4:209)
at Object.expressionInputWatch [as get] (http://localhost:63342/test/www/lib/ionic/js/ionic.bundle.js:22954:31)
at Scope.$digest (http://localhost:63342/test/www/lib/ionic/js/ionic.bundle.js:24502:40)
at Scope.$apply (http://localhost:63342/test/www/lib/ionic/js/ionic.bundle.js:24778:24)
at done (http://localhost:63342/test/www/lib/ionic/js/ionic.bundle.js:19191:47)
at completeRequest (http://localhost:63342/test/www/lib/ionic/js/ionic.bundle.js:19363:7)
at XMLHttpRequest.requestLoaded (http://localhost:63342/test/www/lib/ionic/js/ionic.bundle.js:19304:9)
ionic.bundle.js:21157
TypeError: Cannot read property 'persons' of undefined
at Scope.$scope.getname (http://localhost:63342/test/www/js/controllers/c_menu.js:27:35)
at fn (eval at <anonymous> (http://localhost:63342/test/www/lib/ionic/js/ionic.bundle.js:21972:15), <anonymous>:4:209)
at Object.expressionInputWatch [as get] (http://localhost:63342/test/www/lib/ionic/js/ionic.bundle.js:22954:31)
at Scope.$digest (http://localhost:63342/test/www/lib/ionic/js/ionic.bundle.js:24502:40)
at Scope.$apply (http://localhost:63342/test/www/lib/ionic/js/ionic.bundle.js:24778:24)
at done (http://localhost:63342/test/www/lib/ionic/js/ionic.bundle.js:19191:47)
at completeRequest (http://localhost:63342/test/www/lib/ionic/js/ionic.bundle.js:19363:7)
at XMLHttpRequest.requestLoaded (http://localhost:63342/test/www/lib/ionic/js/ionic.bundle.js:19304:9)
答案 0 :(得分：0)
Your problem is because $ http works asynchronously. Try this:
The controller:
app.controller('myapp', function($scope,$http){
var folder = 'DB/';
$http.get(folder+'database.json').success(function(data){
$scope.DataBase = data;
$scope.namePerson = $scope.DataBase.persons[0].name;
});
});
The html is:
<body>
<div class="d_name" ng-controller="myapp">
{{namePerson}}
</div>
</body>