Scope property which depends on another scope property? - angularjs

Question

I'm just starting out with Angular and could use a hand re: binding to scopes.
I'm trying to load in data which populates a property.
I then want to update other properties based off this property, is there any way to trigger this easily?
At the moment I'm just doing:
Load JSON data
Set mythings
Trigger calculation of mythings_processed
I feel like I should be able to trigger (3) with (2)?
Example
Javascript
app.controller('MyCtrl', function($scope, $http) {
$scope.loadData = function () {
$http.get('/api/orgs/gocardless/issues.json').success(function(data) {
$scope.mythings = data.things;
$scope.generateCalculatedItems() // Surely this isn't necessary?
});
};
$scope.generateCalculatedItems = function () {
mythings_processed = {}; // Generated using mythings
$scope.mythings_processed = mythings_processed;
};
};
HTML
<div ng-controller="IssuesCtrl" ng-init="loadData()">
<ul>
<li ng-repeat="thing in things">{{thing.id}}</li>
</ul>
<ul>
<li ng-repeat="processed_thing in mythings_processed">{{processed_thing.id}}</li>
</ul>
</div>
I'm sure I'm doing something horrible to Angular here so I apologise!
I did feel like I should be able to do:
$scope.mythingsProcessed = function () {
mythings_processed = {}; // Generated using mythings
return mythings_processed;
};
<ul>
<li ng-repeat="processed_thing in mythingsProcessed()">{{processed_thing.id}}</li>
</ul>
But when I did, it gave me the error: 10 $digest() iterations reached. Aborting!
Any ideas?
UPDATE: Example data/use case
I have a list of items fetched via ajax:
{
items: [
{name: 'pete', value: 1},
{name: 'john', value: 2},
{name: 'pete', value: 3},
{name: 'steve', value: 2},
{name: 'john', value: 1}
]
}
I want to display all of these, but I also want to process (sum) them into:
{
processed_items: [
{ name: 'pete', value: 4 }
{ name: 'john', value: 3 }
{ name: 'steve', value: 2 }
}
and then display these in a list as well.

Answer 1

I am not 100% sure what you are trying to acheive. But to trigger (3) with (2) you could use the watch function of the $scope object:
app.controller('MyCtrl', function($scope, $http) {
$scope.loadData = function () {
$http.get('/api/orgs/gocardless/issues.json').success(function(data) {
$scope.mythings = data.things;
});
};
scope.$watch('mythings', function(newValue, oldValue) {
$scope.generateCalculatedItems();
}
$scope.generateCalculatedItems = function () {
mythings_processed = {}; // Generated using mythings
$scope.mythings_processed = mythings_processed;
};
};
To bind mythings to mythings_processed you have to do the binding manually via the $watch-function in AngularJS.

Answer 2

With your updated example I think the focus of your question shifted from the problem with the binding to how you could process the incoming data. Is that correct?
I made a plunker with a possible solution:
http://plnkr.co/edit/BMNmE5
I would process the data as soon as the success method is called. And not do a watch in this case.
$scope.loadData = function() {
$http.get('data.json').success(function(data) {
$scope.mythings = data;
$scope.mythingsProcessed = processThings(data);
});
};
Then the function processThings makes the sum as you want them (it uses the underscore.js library):
var processThings = function(things) {
var result = _.reduce(
things,
function(result, obj) {
var storedObject = _.findWhere(result, {'name': obj.name});
if(storedObject) {
storedObject.value += obj.value;
return result;
}
else {
return _.union(result, _.clone(obj));
}
},
[]);
return result;
};