How can I manipulate an object derived from a JSON response before my angular view is updated?
You could do:
success(function(data, status, headers, config) { $scope.tags = []; data.forEach(function(urlObject) { // Get array of tags from the string of tags var tagsList = urlObject.tags.split(','); tagsList.forEach(function(tag) { $scope.tags.push({ url: urlObject.url, tag: tag }); }); });})and then use the same HTML you have.
From your json response (let's call it data):
var tags = [];// Loop on every response itemfor (var i = 0; i < data.length; i++) { // Get all tags from this response item var splits = data[i].tags.split(','); for (var j = 0; j < splits.length; j++) { tags.push({url: data[i].url, tag: splits[i]}); }}// Put the array into our scope$scope.tags = tags;Then you can use your template:
<a ng-repeat="tag in tags" href="{{tag.url}}">{{tag.tag}}</a>
Currently you are trying to display a value which does not yet exist on $scope. i.e. "tag". The only variable on $scope is posts. If you want to continue in the current fashion your html would need to be as such:
<body ng-app="MyApp"> <div ng-controller="TagCtrl"> <div ng-repeat="post in posts"> <a ng-repeat="tag in post.tags" href="{{post.url}}">{{tag}}</a> </div> </div></body>However this will not split your tags out. I haven't tested this but it should work:
(function(){ app.controller('tagCtrl', tagCtrl); tagCtrl.$inject = ['$scope', '$http']; function tagCtrl($scope, $http){ $scope.posts = []; $http.get('data/tags.json') .success(function(data){ $scope.posts = data; $scope.posts.forEach(function(post){ post.splitTags = post.tags.split(","); }); }) .error(function(data, status, headers, config) { // log error }); }})();<body ng-app="MyApp"> <div ng-controller="tagCtrl"> <div ng-repeat="post in posts"> <a ng-repeat="tag in post.splitTags" href="{{post.url}}">{{tag}}</a> </div> </div></body>