Menu
I have a array of object. I need to group the data by one field and show the result in an HTML table.
INPUT :
[
{
id: "559e2bbc9a496034557d6d84",
text: "Data Sources",
topParentId: "559e2bbc9a496034557d6d84",
topParentText: "Data Sources"
},
{
id: "559e2bbc9a496034557d6d83",
text: "Applications",
topParentId: "559e2bbc9a496034557d6d83",
topParentText: "Applications"
},
{
id: "559e2bbc9a496034557d6d82",
text: "Analytics",
topParentId: "559e2bbc9a496034557d6d83",
topParentText: "Applications"
}
]
From this I need to create an HTML table like this (grouping data by topParentId):
Group | Tags
Data Sources | Data Sources
Applications | Applications Analytics
So far I have done this:
<table class="table table-bordered">
<thead>
<tr>
<th>Group</th>
<th>Tags</th>
</tr >
</thead>
<tbody>
<tr ng-repeat="tag in topic.tags | groupBy: 'topParentId'">
<td>{{tag.topParentText}}</td>
</tr>
<tr>
<td>{{tag.text}}</td>
</tr>
</tbody>
</table>
But after running this code, I am getting Unknown provider: groupByFilterProvider <- groupByFilter error.
I am using AngularJs 1.2
517
see, [angular.filter] is a dependency Injection, in which it is a seperate module (not part of Anjular js core ) , if you dont inject that then you wont be able to do groupBy. if it works, Please close this post by marking it as answer.
Providers Each web application you build is composed of objects that collaborate to get stuff done. These objects need to be instantiated and wired together for the app to work. In AngularJS apps most of these objects are instantiated and wired together automatically by the injector service.
Since neither of these are declared, you will receive the "Unknown provider" error. To fix this, you should change all of the dependencies to strings: angular('myModule').service('myService', ['anotherService', function(anotherService) { // ...
This injection is done by a provider injector which is different from the regular instance injector, in that it instantiates and wires (injects) all provider instances only. During application bootstrap, before AngularJS goes off creating all services, it configures and instantiates all providers.
As mentionned by @jhadesdev orderBy is available out of the box, but not groupBy.
It is included in angular-filter
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
