How to load nested JSON URLs and display in a template
David Janes
Sander Elias
Hi David,
Well, I have no idea what those url’s return. That makes it hard to give a complete solution to your problem.
<div ng-repeat="room in rooms">
<h1>
{{ room.room }}
<span class="floor pull-right">{{ room.floor }}</span>
</h1>
<div ng-repeat="api_endpoint in room.api_endpoints" ng-init='data= {url:api_endpoint}'>
<h2>
{{resolve(data) ; data.data|json}}
</h2>
</div>
</div>
in your controller you can do this:
$scope.resolve = function(data) {
$http.get(data.url).success(function (incoming) {
data.data = incoming;
});
};
It is good to note you should move the to an service, if it becomes any more complex than this.
If you have control over the back-end/server that is giving you the data, you might consider
it to generate html partials, that you can simply include using ng-include.
Regards
Sander
David Janes
--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/hyiN-DvsCTA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Sander Elias
Hi David,
Yeah, I have enough thoughts, some of them are even relevant to your problem :-P
David, this is less common as you would think. You are missing the point that you can’t use raw JSON data in your view, you need to handle that first.
Mostly this kind of stuff is handled in a template directive, and data is loaded via an service. Since you are hitting the 10… limit, you are trying to do
too much in 1 go. Upping the limit is a dead end, if your app grows a bit, you need to up the ante again. Not a good idea.
Here is and idea on how to build a template directive. I put the $http in there, but you really should make a service out of it!
app.directive('enpointHandler', ['$http',
function ($http) {
return {
restrict: "E",
scope : {uri: '='},
template: '<div>{{endpointData.someExistingProperty}}</div>',
link: function (scope, elm, attr) {
scope.$watch('uri', function (uri) {
if (!uri) { return; } //ignore empty uri's
$http.get(uri).success(function (data) {
scope.endpointData = data;
});
});
}
};
}
]);
<div ng-repeat="room in rooms">
<h1>
{{ room.room }}
<span class="floor pull-right">{{ room.floor }}</span>
</h1>
<div ng-repeat="api_endpoint in room.api_endpoints">
<endpoint-handler uri='api_endpoint'></endpoint-handler>
</div>
</div>
This is just typed up in the browser out of the top of my head, so it might not work in 1 go ;)
Regards
Sander