Angularjs - JSON Update

Question

I am very new to Angularjs and I am having trouble figuring out how to update the $ scope element that I created from JSON. Basically, I have a service that contains a function that captures JSON:

app.service('JSONService', function($http){ return{ getJSON: function(){ return $http.get('posts.json') .then(function(response){ return response.data; }); } }; }); 

Then I have a controller containing a function that receives JSON data when the button is clicked and puts it in $ scope.data and a second function that I would like to use to update $ scope.data:

 app.controller('PostController', function PostController($scope, JSONService){ $scope.data; $scope.getJSON = function(){ $scope.data = JSONService.getJSON(); }; $scope.addPost = function(){ // Add to $scope.data }; }); 

Currently, I am successfully capturing JSON data and can use it to populate aspects of my view, but I'm fixated on how to continue updating $ scope.data so that:

• It actually updates
• The update is reflected in my view.

I tried $ broadcast, $ scope.data.push, $ scope.data.posts.push. They are either flat or not processed, or these errors. I am sure this may be a simple answer, but I feel that I can be inexperienced with Angularjs and JSON to pick it up. Thanks in advance.

Answer 1

So, I think there are a couple of problems with the code above. Hope this helps you figure it out:

The $ http.get () function returns a "promise." Promises have a then () function that you use, but you probably need to adjust to take the returned data and put it directly in $ scope. The execution of the "return" statement inside then () in your service does not really have a place to go at this point, since the request was asynchronous. Angular knows how to work with promises, so you can bind to data in the user interface, but you actually won't find the data directly in $ scope.data. $ scope.data will still be the object of the promise, and the data will be in another property (something like $ scope.data.promiseData - they don’t remember exactly what the property is). You can configure the following:

 app.service('JSONService', function($http){ return { getJSON: function() { return $http.get('posts.json'); } }; }) 

Controller:

 app.controller('PostController', function PostController($scope, JSONService){ $scope.data; $scope.getJSON = function(){ JSONService.getJSON() .then(function (response) { $scope.data = response.data; }); }; $scope.addPost = function(postText){ // Add to $scope.data (assuming it an array of objects) $scope.data.push({postText: postText}); }; }); 

HTML:

 <div data-ng-repeat="post in data">{{post.postText}}</div> <input type="text" ng-model="newPostText"> <button type="button" ng-click="addPost(newPostText)">Add Post</button> 

Answer 2

In fact, although the above code is correct, in this case the getJSON function is not actually called anywhere, so the $ scope.data data is never populated.