Develop Reference

filter thought the contacts that have secondary numbers

Im trying to filter and take only the contacts that the number is in numbers my problem is that one numbers could be the secondary number of the contact and filter(indexOf(foreach())) doesn't seem to work here any advice?
const filteredContacts = contacts.filter(contact => numbers.indexOf(contact.phoneNumbers.forEach(phone => phone.number)) > -1);
//sample of contacts
Object {
"company": "Financial Services Inc.",
"contactType": "person",
"firstName": "Hank",
"id": "2E73EE73-C03F-4D5F-B1E8-44E85A70F170",
"imageAvailable": false,
"jobTitle": "Portfolio Manager",
"lastName": "Zakroff",
"middleName": "M.",
"name": "Hank M. Zakroff",
"phoneNumbers": Array [
Object {
"countryCode": "us",
"digits": "5557664823",
"id": "337A78CC-C90A-46AF-8D4B-6CC43251AD1A",
"label": "work",
"number": "(555) 766-4823",
},
Object {
"countryCode": "us",
"digits": "7075551854",
"id": "E998F7A3-CC3C-4CF1-BC21-A53682BC7C7A",
"label": "other",
"number": "(707) 555-1854",
},
],
},
Object {
"contactType": "person",
"firstName": "David",
"id": "E94CD15C-7964-4A9B-8AC4-10D7CFB791FD",
"imageAvailable": false,
"lastName": "Taylor",
"name": "David Taylor",
"phoneNumbers": Array [
Object {
"countryCode": "us",
"digits": "5556106679",
"id": "FE064E55-C246-45F0-9C48-822BF65B943F",
"label": "home",
"number": "555-610-6679",
},
],
},
]
//Sample of numbers
numbers = [
(707) 555-1854,
555-610-6679
]
//Expected
filteredContacts = //Both contacts

This should work for you:
const contacts= [
{
company: "Financial Services Inc.",
// ....
phoneNumbers:[
{
//...
number: "(555) 766-4823",
},
{
//...
number: "555-610-6679",
}
]
}
//...
];
//Sample of numbers
const numbers = [
'(707) 555-1854',
'555-610-6679'
]
const filteredContacts = contacts.filter(contact => {
let number_exists=false;
contact.phoneNumbers.map(phone => phone.number).forEach( phoneNr =>{
if(numbers.indexOf(phoneNr)>-1) number_exists=true;
}
);
return number_exists;
}
);
//Expected
console.log(filteredContacts)

angularjs filter to return only the exact matching values

I have a checkbox as a filter in my angularjs app :
this is my data :
app.controller('listdata', function($scope, $http) {
$scope.users = [{
"name": "pravin",
"queue": [{
"number": "456",
"status": "Unavailable"
}],
"phone": "7411173737"
},
{
"name": "pratik",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "8558855858"
},
{
"name": "priyanka",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "5454573737"
},
{
"name": "prerana",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "7454543737"
}];
});
I'm displaying the above data in my view like this :
//this is the filter
<label class="switch">
<input ng-true-value='111' ng-false-value='' type="checkbox" ng-model="queue111">111
</label>
//ng-repeat part
<div class="row" ng-controller="listdata">
<div ng-repeat="user in users|filter:queue111">
<p> {{user.name}} {{user.phone}}</p>
</div>
</div>
When I start the app all the four users from the users data array are displayed.
When I click on the filter checkbox, it displays the users who have a queue with a number 111. but it also displays the user pravin as it contains a phone number 7411173737 which contains 111. I want this filter to only display records whose queue number matches with 111 and not with any other fields like the phone number here. So the filter should only display records where the queue number is 111.
is it possible to do something like
<input ng-true-value='111' ng-false-value='' type="checkbox" ng-model="queue111.queue.number">111
Current output : it displays all the four data objects in $scope.users
Expected output : display only the data objects where in queue number
is 111 in $scope.users
how do I do it?

Try with this custom filter function to match only values inside the queue array.
var Controller = function($scope) {
$scope.users = [{
"name": "pravin",
"queue": [{
"number": "456",
"status": "Unavailable"
}],
"phone": "7411173737"
},
{
"name": "pratik",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "8558855858"
},
{
"name": "priyanka",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "5454573737"
},
{
"name": "prerana",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "7454543737"
}
];
$scope.filter = function(item) {
if ($scope.queue111) {
return JSON.stringify(item.queue).includes($scope.queue111);
} else {
return true;
}
};
};
angular
.module('app', [])
.controller('Controller', Controller);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Controller">
<label class="switch">
<input ng-true-value='111' ng-false-value='' type="checkbox" ng-model="queue111">
</label>
<pre>Search value: {{queue111}}</pre>
<div ng-repeat="user in users | filter:filter">
{{user.name}} {{user.phone}}
</div>
</div>

I fixed it like this by using a custom function and the ternary operator in the filter:
var app = angular.module('myApp', []);
app.controller('listdata', function($scope, $http) {
$scope.users = [{
"name": "pravin",
"queue": [{
"number": "456",
"status": "Unavailable"
}],
"phone": "7411173737"
},
{
"name": "pratik",
"queue": [{
"number": "111",
"status": "Unavailable"
},
{
"number": "112",
"status": "Unavailable"
}],
"phone": "8558855858"
},
{
"name": "priyanka",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "5454573737"
},
{
"name": "prerana",
"queue": [{
"number": "111",
"status": "Unavailable"
}],
"phone": "7454543737"
}];
$scope.filter111 = function (user) {
return (user.queue.find(({number}) => number === '111'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
<div ng-app="myApp">
<label class="switch">
<input type="checkbox" ng-model="queue111">111
</label>
<div class="row" ng-controller="listdata">
<div ng-repeat="user in users|filter: queue111? filter111: ''">
<p> {{user.name}} {{user.phone}}</p>
</div>
</div>
</div>

You can just pass true to the filter to enable strict matching.
<div ng-repeat="user in users|filter:queue111:true">

How group objects in array in array from ng-repeat with filter?

How group objects in array in array from ng-repeat with filter ?
I have an array with objects, and I would like group by this objects by their countries.
Sample : I would like to have this result :
Free : Australia, India, United States
Pay : Australia
Not Pay : Australia, India
from :
{
"id": 1,
"offer": [
{
"id": 9806,
"country": {
"name": "Australia"
},
"code_show": [
{
"code": "Free"
},
{
"code": "Pay"
},
{
"code": "Not Pay"
}
]
},
{
"id": 9807,
"country": {
"name": "India"
},
"code_show": [
{
"code": "Free"
},
{
"code": "Not Pay"
}
]
},
{
"id": 9808,
"country": {
"name": "United States"
},
"code_show": [
{
"code": "Free"
}
]
}
],
},
{
"id": 2,
"offer": [
{
"id": 9806,
"country": {
"name": "Australia"
},
"code_show": [
{
"code": "Free"
},
{
"code": "Not Pay"
}
]
},
{
"id": 9807,
"country": {
"name": "Mexico"
},
"code_show": [
{
"code": "Free"
}
]
},
{
"id": 9808,
"country": {
"name": "United States"
},
"code_show": [
{
"code": "Free"
}
]
}
]
}
I tried this with the code :
<ul ng-repeat="(key, value) in offer.code_show | groupBy: 'code_show.code'">
{{ key }}
<li ng-repeat="country in value">
: {{ country.name }}
</li>
</ul>

This might be better done in the controller - mainly cause you'll have a different data structure:
$scope.groupedByCode = {};
$scope.offer.forEach(function(obj) {
obj["code_show"].forEach(function(code) {
if (!$scope.groupedByCode[code]) {
$scope.groupedByCode[code] = [];
}
$scope.groupedByCode[code].push(obj);
});
});
Now you'll have each offer object in a key with the name of the code, then just make the view:
<ul ng-repeat="(key, value) in groupedByCode">
{{ key }}
<li ng-repeat="country in value">
: {{ country.country.name }}
</li>
</ul>

Converting Multidimensional JSON key-value pairs into an Angular Menu (no Angular knowledge required)

I asked this question here:
Working With Dynamic Multidimensional key-value pairs in JSON
But it's become a bit more involved and I can't get where I'm going from that answer. If I have a data object that looks like this:
{
"email": "user#someco.com",
"firstname": "Bob",
"lastname": "Smith",
"company": "ACME",
"custom": {
"services": [
{
"name": "svc1",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc2",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc3",
"desc": "abcdefg",
"selected": "false",
"status": "None"
},
{
"name": "svc4",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
],
"fields": [
{
"name": "Products",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Product1",
"desc": "abcdef"
},
{
"name": "Product2",
"desc": "abcdef"
}
],
"services": [
"svc1",
"svc2",
"svc3"
]
},
{
"name": "Wines",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Wine 1",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
},
{
"name": "Fruits",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Fruit 1",
"desc": "abcdef"
},
{
"name": "Fruit 2",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
}
]
}
};
How can I convert that into an Angular menu? The menu would need to list all of the services, and then if the service has an associated item in "fields" that item should be listed underneath it. So for instance "svc1" and its description should be listed on a line (got that working) but then "Product1" and "Product2" with their descriptions should appear on the next two lines because you can see that "svc1" is listed in the "services" field for "Products." Similarly, "svc4" should appear on a line, and then "Wines" and its description on the next line because "svc4" appears in the "services" field of "Wines."
I think the best way is to unpack and re-pack this JSON object in sequential order in the Angular controller and then push this data out to the Angular view but there might be a solution using only the logic available from the view. I've tried a bunch of nested fors and ifs along these lines (very much not working):
var i, j;
var listArray = [];
for (i = 0; i < $scope.svcs.length; i++) {
var littleArray = [$scope.svcs[i].status, $scope.svcs[i].name, $scope.svcs.desc];
listArray.push[littleArray1];
for (j=0; j < $scope.jFA.length; j++) {
if ($scope.jFA[j] == $scope.svcs[i].name) {
if ($scope.jFA[j] == $scope.svcs[i].fields)
littleArray = [$scope.jFA[j].fields] //...etc
}
}
...but that logic just keeps getting more and more dense and isn't working no matter now I try to use it. I liked the simplicity in the answer to the other question but have not had success in replicating it.
So if someone can help me figure out how to get the data into the right sequence using JS I can handle the Angular part. Or if you're an Angular whiz and have an answer along those lines, even better.

So it was a little hard understanding your question, but I gave it my best shot. Does this fiddle show what you are trying to achieve? http://jsfiddle.net/arknr6qz/1/
JS:
var app = angular.module('TestApp',[]);
app.controller('TestController', function($scope)
{
$scope.checkService = function(service, fieldServices)
{
if (fieldServices.indexOf(service) != -1) return true;
return false;
};
$scope.data = {
"email": "user#someco.com",
"firstname": "Bob",
"lastname": "Smith",
"company": "ACME",
"custom": {
"services": [
{
"name": "svc1",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc2",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "svc3",
"desc": "abcdefg",
"selected": "false",
"status": "None"
},
{
"name": "svc4",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
],
"fields": [
{
"name": "Products",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Product1",
"desc": "abcdef"
},
{
"name": "Product2",
"desc": "abcdef"
}
],
"services": [
"svc1",
"svc2",
"svc3"
]
},
{
"name": "Wines",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Wine 1",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
},
{
"name": "Fruits",
"desc": "abcdef",
"type": "multi",
"values": [
{
"name": "Fruit 1",
"desc": "abcdef"
},
{
"name": "Fruit 2",
"desc": "abcdef"
}
],
"services": [
"svc4"
]
}
]
}
};
});
HTML:
<div ng-app="TestApp">
<div ng-controller="TestController">
<div ng-repeat="service in data.custom.services">
{{ service.name }}
<div class="indent" ng-repeat="fields in data.custom.fields">
<span ng-if="checkService(service.name, fields.services)">
{{fields.services.values}}
<span ng-repeat="value in fields.values">
{{value.name}} - {{value.desc}}<br>
</span>
</span>
</div>
</div>
</div>
</div>
and finally css:
.indent {
margin-left:10px;
}

AngularJS - Filter on ng-repeat, hiding the column heading

I have a massive JSON response from a REST service that contains lots of cities over the world... the structure is like this (here's just a sample... it would normally consist of 100-200 places and comes from a service - I have just set it to the $scope item for better understanding):
$scope.cityData = [
{
"country": "Deutschland",
"cities": [
{
"id": 1,
"name": "Berlin",
"country": "Deutschland",
"browserUrl": "berlin",
"clusterId": null
},
{
"id": 2,
"name": "Hamburg",
"country": "Deutschland",
"browserUrl": "hamburg",
"clusterId": null
},
{
"id": 3,
"name": "München",
"country": "Deutschland",
"browserUrl": "muenchen",
"clusterId": null
},
{
"id": 4,
"name": "Köln",
"country": "Deutschland",
"browserUrl": "koeln",
"clusterId": null
}
]
},
{
"country": "Schweiz",
"cities": [
{
"id": 15,
"name": "Zürich",
"country": "Schweiz",
"browserUrl": "zuerich",
"clusterId": null
},
{
"id": 16,
"name": "Geneva",
"country": "Schweiz",
"browserUrl": "geneva",
"clusterId": null
}
]
},
{
"country": "Österreich",
"cities": [
{
"id": 19,
"name": "Vienna",
"country": "Österreich",
"browserUrl": "vienna",
"clusterId": null
},
{
"id": 20,
"name": "Graz",
"country": "Österreich",
"browserUrl": "graz",
"clusterId": null
},
{
"id": 20,
"name": "Linz",
"country": "Österreich",
"browserUrl": "linz",
"clusterId": null
}
]
}
];
Now on my interface I wish to group these like so:
- Country
---- City
---- City
---- City
- Country
---- City
---- City
---- City
I also wish to filter the repeat using an input field, so I have the following input and ng-repeats on my interface:
<input type="text" ng-model="cityFilter">
<div class="row">
<div class="col-xs-12" ng-repeat="c in cityData | filter: c.country">
{{ c.country }}
<div class="col-xs-12" ng-repeat="d in c.cities | filter: cityFilter">
{{ d.name }}
</div>
</div>
</div>
this works great however the c.country title is always shown regardless of the filter... how should I change my HTML / directives so that the c.country disappears when the cityFilter filter contains a city name that is not applicable / found in that country?
Thanks in advance.

Enclose country in a span and Use ng-show.
<input type="text" ng-model="cityFilter">
<div class="row">
<div class="col-xs-12" ng-repeat="c in cityData | filter: c.country">
<span ng-show="(c.cities | filter: cityFilter).length > 0">{{ c.country }}</span>
<div class="col-xs-12" ng-repeat="d in c.cities | filter: cityFilter">
{{ d.name }}
</div>
</div>
</div>