Count items in array by using ng-repeat AngularJS - javascript

I have a JSONfile like this:
vm.names = [{
'name': 'A'
}, {
'name': 'A'
}, {
'name': 'B'
}, {
'name': 'C'
}, {
'name': 'C'
}]
I using AngularJS filter repeat it in HTML:
<ul ng-repeat ="name in vm.names | unique'name'>
<li>{{name.name}}</li>
</ul>
Here is issue
A
B
C
So I want count item, I want display like this
A num:2
B num:1
C num:2
How can I do that?

Just use the groupBy filter provided by angular-filter like in this runnable fiddle demo:
View
<div ng-controller="MyCtrl">
<ul ng-repeat="item in names | groupBy: 'name' ">
<li>{{item[0].name}}: {{ item.length}}</li>
</ul>
</div>
AngularJS application
var myApp = angular.module('myApp', ['angular.filter']);
myApp.controller('MyCtrl', function($scope) {
$scope.names = [{
'name': 'A'
}, {
'name': 'A'
}, {
'name': 'B'
}, {
'name': 'C'
}, {
'name': 'C'
}];
});

Related

Multi level json filter in angular js

I am new in angular js i want to put filter in ng-repeat i have json like this
var data = [
{name:test1,b1:{lastValue:0},b2:{lastValue:6},b3:{lastValue:6},b4:{lastValue:0}}
{name:test2,b1:{lastValue:6},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
{name:test3,b1:{lastValue:6},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
]
I want to put filter on lastValue i tested like this
ng-repeat = "d in data | filter:{*.lastValue:filterStatus}"
filterStatus // contain value of filter which user selected but its not working
I don't know how to do this i tried google but nothing found please help me
<input ng-model="filterStatus" type="text">
your filterStatus should hold model value
ng-repeat = "d in data | filter:filterStatus"
var app = angular.module("Profile", []);
app.controller("ProfileCtrl", function($scope) {
$scope.filter_val = {}
$scope.data = [{
name: 'test1',
b1: {
lastValue: 0
},
index: 'b1'
}, {
name: 'test2',
b2: {
lastValue: 6
},
index: 'b2'
}, {
name: 'test3',
b3: {
lastValue: 6
},
index: 'b3'
}, {
name: 'test4',
b4: {
lastValue: 0
},
index: 'b4'
}, {
name: 'test5',
b5: {
lastValue: 89
},
index: 'b5'
}, {
name: 'test6',
b6: {
lastValue: 68
},
index: 'b6'
}]
$scope.own_filter = function(val) {
if (!$scope.filter_val.value)
return true;
else {
return (String(val[val['index']]['lastValue'] || '').indexOf($scope.filter_val.value) != -1)
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
<input type="text" ng-model="filter_val.value" placeholder="Enter Last Value">
<div class="row" ng-repeat="event in data |filter:own_filter track by $index ">
<h4>{{'Name : ' + event.name}}------{{'Last Value : '+event[event['index']]['lastValue']}}</h4>
</div>
</body>
Use {$:filterStatus} construction:
angular.module('app', []).controller('ctrl',function($scope){
$scope.data = [
{name:'test1',b1:{lastValue:1},b2:{lastValue:6},b3:{lastValue:6},b4:{lastValue:0}},
{name:'test2',b1:{lastValue:2},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}},
{name:'test3',b1:{lastValue:3},b2:{lastValue:0},b3:{lastValue:6},b4:{lastValue:0}}
]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller='ctrl'>
<input type='number' ng-model='filterStatus' ng-init='filterStatus=1'>
<ul>
<li ng-repeat='item in data | filter: {$:filterStatus}'>{{item.name}}</li>
</ul>
</div>

Searching through multiple ng-repeats at once

i'm currently working on an application that is build with AngularJS as a base, and that obtains data through the prestashop webservice. All data obtained are JSON strings sorted through multiple files. Now i'm trying to create a searchbox that filters through some objects the moment the user fills in the searchbox. The easy way is ofcourse by using the ng-model and filter: combination like below:
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
</div>
<p>The list will only consists of names matching the filter.</p>
</body>
</html>
But what if you're using two different sources? and two different ng-repeats?
So in my application some of the data is about customers. The data is obtained through two different $http.get() functions. One is for the customers basic information. The second one is the address information. Take a look below:
// Get the customers
$http.get('config/get/getCustomers.php', {cache: true}).then(function(response){
$scope.customers = response.data.customers.customer
});
// Get the addresses
$http.get('config/get/getAddress.php', {cache: true}).then(function (response) {
$scope.addresses = response.data.addresses.address
});
By using ng-repeat and ng-if i'm able to filter the information and connect it together. ng-if="customer.id == address.id_customer" ng-repeat=...
A full example below:
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.customers = [{
'id': 1,
'name': 'Jani'
},{
'id': 2,
'name': 'Carl'
},
{
'id': 3,
'name': 'Tim'
},
{
'id': 4,
'name': 'Tom'
}
];
$scope.addresses = [{
'id': 1,
'id_customer': 1,
'place': 'Street 12'
},{
'id': 2,
'id_customer': 2,
'place': 'Other street'
},
{
'id': 3,
'id_customer': 3,
'place': 'marioworld!'
},
{
'id': 4,
'id_customer': 4,
'place': 'Space!'
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="namesCtrl">
<div ng-repeat="customer in customers">
<div ng-bind="customer.id + ' - ' + customer.name"></div>
<div ng-if="customer.id == address.id_customer" ng-repeat="address in addresses" ng-bind="address.place">
</div>
</div>
</div>
So as you can see i'm able to create the combination with the ng-if but now i would like to create a search input that's able to search through both fields. And that's where my issue starts. I'm able to create it for one ng-repeat. But what if i want to Search on the address and the customer? I would like to create the possibility of letting the user search by customer name, street address and ZIP code. But the ZIP code and address are from a different source.
I hope that someone has found a solution for this and if you have any questions please ask them in the comments.
As always, thanks in advance!
I'd suggest to map your customers array adding to each object it's own place this way:
$scope.customers.map( function addPlace(item) {
item.place = $scope.addresses.reduce(function(a,b){
return item.id === b.id_customer ? b.place : a;
}, '');
return item;
})
This way your template will be easier to read, and you will be able to use your previous search.
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.customers = [{
'id': 1,
'name': 'Jani'
},{
'id': 2,
'name': 'Carl'
},
{
'id': 3,
'name': 'Tim'
},
{
'id': 4,
'name': 'Tom'
}
];
$scope.addresses = [{
'id': 1,
'id_customer': 1,
'place': 'Street 12'
},{
'id': 2,
'id_customer': 2,
'place': 'Other street'
},
{
'id': 3,
'id_customer': 3,
'place': 'marioworld!'
},
{
'id': 4,
'id_customer': 4,
'place': 'Space!'
}
];
$scope.customers.map( function addPlace(item) {
item.place = $scope.addresses.reduce(function(a,b){
return item.id === b.id_customer ? b.place : a;
}, '');
return item;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<div ng-repeat="customer in customers | filter:test">
{{ customer.id }} - {{ customer.name }}
<br>
{{ customer.place}}
</div>
</div>
</div>

Angular filter for words inside a phrase

I'm building an AngularJS app. I have this array:
$scope.products = [
{name: 'cake (just it!)'},
{name: 'orange cake'},
{name: 'cheesecake'}
];
then I use ng-repeat for show it.
<li ng-repeat="product in products | filter : { name : word }">
{{ $product.name }}
</li>
I want to add a filter that will search the beginning of each word inside the phrase, so if I do this:
$scope.word = 'ca';
It will return the following array:
$scope.products = [
{name: 'cake (just it!)'},
{name: 'orange cake'}
];
You could do it using a custom filter as mentioned below
var app = angular.module("sampleApp", []);
app.controller("sampleController", ["$scope",
function($scope) {
$scope.products = [{
name: 'cake (just it!)'
}, {
name: 'orange cake'
}, {
name: 'cheesecake'
}, {
name: 'cheese'
}, {
name: 'cheeseca ca'
}];
}
]);
app.filter("nameFilter", function() {
return function(names, contains) {
return names.filter(function(obj) {
var expString = '(\\w*\\s|^)' + contains + '';
var exp = new RegExp(expString, "g");
if (exp.test(obj.name))
return name;
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController">
<ul>
<li ng-repeat="product in products | nameFilter : 'ca' ">
{{product.name}}
</li>
</ul>
</div>
</div>

Sort a nested Array (2D Array) array from filter of angularjs

How I Sort a nested Array (2D Array) array from filter of angularjs. It's very Complicated for Me. anybody can help. appreciated for me. thanks...
I have a 2D Array. now how I sort it within ng-repeat.
Template File...
<ul>
<span ng-repeat="list in lists">
<li ng-repeat="list_ in list.list1 | orderBy:'name'">{{list_.name}}</li>
</span>
</ul>
JS file...
$scope.lists = [
{
no : 1,
list1 : [{
name : 'A'
},
{
name : 'M'
}]},
{
no : 2,
list1 : [{
name : 'B'
}]},
{
no : 5,
list1 : [{
name : 'Z'
}]},
{
no : 3,
list1 : [{
name : 'X'
},
{
name : 'T'
}]}
]
plunker here
It could achievable by flatten the array will all the inner object at the same level using custom filter
Markup
<body ng-app="myApp" ng-controller="myCon">
<ul>
<span ng-repeat="list in lists | flatten | orderBy:'+name'">
<li>{{list.name}}</li>
</span>
</ul>
</body>
Filter
app.filter('flatten', function(){
return function(array){
var flattenArray = [];
angular.forEach(array, function(value, index){
angular.forEach(value.list1, function(val, index){
flattenArray.push(val);
})
})
return flattenArray;
}
})
Plunkr Here
to answer your question of how to sort a nested Array array with an angularjs filter, you actually are already doing so. It isn't clear with your data, so I expanded it to make it show what is happening already:
http://plnkr.co/edit/8SjuLc?p=preview
js
var app = angular.module("myApp", []);
app.controller("myCon", myConFun);
myConFun.$inject = ['$scope'];
function myConFun($scope) {
$scope.lists = [{
no: 1,
list1: [{
name: 'Z'
}, {
name: 'X'
}, {
name: 'Y'
}, {
name: 'A'
}, {
name: 'M'
}, {
name: 'C'
}, {
name: 'B'
}]
}, {
no: 2,
list1: [{
name: 'B'
}]
}, {
no: 5,
list1: [{
name: 'Z'
}]
}, {
no: 3,
list1: [{
name: 'X'
}, {
name: 'T'
}]
}
]
}
html
<ul>
<span ng-repeat="list in lists">
<li ng-repeat="sublist in list.list1 | orderBy:'name'">
{{sublist.name}}
</li>
----------
</span>
</ul>
output:
You may need to expand your question further if this isn't the behavior you need

orderBy descending order doesn't work in my case?

I expect to see decesecing order base on points work but it doesn't, here is the demo http://jsfiddle.net/uRPSL/34/
ng-repeat
<ul ng-repeat="friend in user">
<li ng-repeat="relation in friend.relationship | orderBy:'points':true">
{{relation.name}}
</li>
</ul>
js
app.controller('Controller', function ($scope, $rootScope, $location) {
$scope.user = [{
'uId': 1,
'name': 'Joe',
'relationship': [{
'uId': 2,
'name': 'Jeremy',
'tabs': [{
'tabId': 1
}],
'tasks': [{
'name': 'Im Jeremy Lin'
}],
'points': 50
}]
}, {
'uId': 2,
'name': 'justin',
'relationship': [{
'uId': 3,
'name': 'Jordan',
'tabs': [{
'tabId': 2
}],
'tasks': [{
'name': 'Im Jasmin Jacob'
}],
'points': 100
}]
}];
})
In your example there is only 1 relationship in each of the relationship arrays. If you add items to those arrays, you can see that they are being sorted correctly. Here is an update of your fiddle, with extra data for visibility:
http://jsfiddle.net/8Ub6n/
$scope.user = [
{
'uId':1,
'name':'Joe',
'relationship':[
{
'uId':2,
'name':'Jeremy',
'points':50
},
{
'uId':2,
'name':'Michael',
'points':80
}
]
},
{
'uId':2,
'name':'justin',
'relationship':[
{
'uId':3,
'name':'Jordan',
'points':100
},
{
'uId':4,
'name':'Cameron',
'points':15
}
]
}
];
You can do this in nested loop by:
<ul ng-repeat="friend in user | orderBy:'relationship':'points':true">
<li ng-repeat="relation in friend.relationship">
{{relation.name}}
</li>
</ul>
Here orderBy:'Array':'expression':reverse

Categories