Mixing
General search pipe Angular6
3
How can I make a general search into a table using pipes in Angular? I have this working snippet, but the value of i is only 0, and I don't know why (and because of that, it will only search for name column only, if I type cc it won't find anything).
How can I modify the code in order to obtain what I want? Thank you for your time!
filter.pipe.ts
transform(value: any, input: string) {
if (!value) {
return ;
}
if (!input) {
return value;
}
var valuesArr =
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
valuesArr = Object.keys(el).map(key => el[key]);
for (var i in valuesArr) {
return valuesArr != null && valuesArr[i] != null && valuesArr[i] != undefined && valuesArr[i].toLowerCase().indexOf(input) > -1;
}
})
}
return value;
}
app.html
<input type="text" [(ngModel)]="toSearch" (click)="onClick(toSearch)">
<table>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Group</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users | filter : toSearch">
<td>{{ user.name }}</td>
<td>{{ user.surname }}</td>
<td>{{ user.group }}</td>
<tr>
</tbody>
</table>
app.ts
toSearch
users = [
{name: "john", surname: "john1", group: null},
{name: "mike", surname: "", group: 'bb'},
{name: "anne", surname: "anne1", group: ''},
{name: "dan", surname: "dan1", group: 'cc'},
{name: "ben", surname: "", group: 'a'},
]
onClick(toSearch) {
this.toSearch = toSearch
}
javascript angular filter
asked Nov 19 '18 at 13:16
Tenzolinho
22310
add a comment |
3
How can I make a general search into a table using pipes in Angular? I have this working snippet, but the value of i is only 0, and I don't know why (and because of that, it will only search for name column only, if I type cc it won't find anything).
How can I modify the code in order to obtain what I want? Thank you for your time!
filter.pipe.ts
transform(value: any, input: string) {
if (!value) {
return ;
}
if (!input) {
return value;
}
var valuesArr =
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
valuesArr = Object.keys(el).map(key => el[key]);
for (var i in valuesArr) {
return valuesArr != null && valuesArr[i] != null && valuesArr[i] != undefined && valuesArr[i].toLowerCase().indexOf(input) > -1;
}
})
}
return value;
}
app.html
<input type="text" [(ngModel)]="toSearch" (click)="onClick(toSearch)">
<table>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Group</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users | filter : toSearch">
<td>{{ user.name }}</td>
<td>{{ user.surname }}</td>
<td>{{ user.group }}</td>
<tr>
</tbody>
</table>
app.ts
toSearch
users = [
{name: "john", surname: "john1", group: null},
{name: "mike", surname: "", group: 'bb'},
{name: "anne", surname: "anne1", group: ''},
{name: "dan", surname: "dan1", group: 'cc'},
{name: "ben", surname: "", group: 'a'},
]
onClick(toSearch) {
this.toSearch = toSearch
}
javascript angular filter
asked Nov 19 '18 at 13:16
Tenzolinho
22310
1
While the right answers can be found below. Thought i'd offer a few small changes you could possibly make to clean up the code. First would be to removeif (input) {statement, at this point in the code its guaranteed to be truthy as you just checked!input. Secondly you can changeObject.keys(el).map(key => el[key]);toObject.values(el).
– Michael Lynch
Nov 19 '18 at 14:02
Thank you for your tips, I changed my code as you said! :-D
– Tenzolinho
Nov 19 '18 at 14:10
add a comment |
3
3
3
How can I make a general search into a table using pipes in Angular? I have this working snippet, but the value of i is only 0, and I don't know why (and because of that, it will only search for name column only, if I type cc it won't find anything).
How can I modify the code in order to obtain what I want? Thank you for your time!
filter.pipe.ts
transform(value: any, input: string) {
if (!value) {
return ;
}
if (!input) {
return value;
}
var valuesArr =
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
valuesArr = Object.keys(el).map(key => el[key]);
for (var i in valuesArr) {
return valuesArr != null && valuesArr[i] != null && valuesArr[i] != undefined && valuesArr[i].toLowerCase().indexOf(input) > -1;
}
})
}
return value;
}
app.html
<input type="text" [(ngModel)]="toSearch" (click)="onClick(toSearch)">
<table>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Group</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users | filter : toSearch">
<td>{{ user.name }}</td>
<td>{{ user.surname }}</td>
<td>{{ user.group }}</td>
<tr>
</tbody>
</table>
app.ts
toSearch
users = [
{name: "john", surname: "john1", group: null},
{name: "mike", surname: "", group: 'bb'},
{name: "anne", surname: "anne1", group: ''},
{name: "dan", surname: "dan1", group: 'cc'},
{name: "ben", surname: "", group: 'a'},
]
onClick(toSearch) {
this.toSearch = toSearch
}
javascript angular filter
asked Nov 19 '18 at 13:16
Tenzolinho
22310
How can I make a general search into a table using pipes in Angular? I have this working snippet, but the value of i is only 0, and I don't know why (and because of that, it will only search for name column only, if I type cc it won't find anything).
How can I modify the code in order to obtain what I want? Thank you for your time!
filter.pipe.ts
transform(value: any, input: string) {
if (!value) {
return ;
}
if (!input) {
return value;
}
var valuesArr =
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
valuesArr = Object.keys(el).map(key => el[key]);
for (var i in valuesArr) {
return valuesArr != null && valuesArr[i] != null && valuesArr[i] != undefined && valuesArr[i].toLowerCase().indexOf(input) > -1;
}
})
}
return value;
}
app.html
<input type="text" [(ngModel)]="toSearch" (click)="onClick(toSearch)">
<table>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Group</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users | filter : toSearch">
<td>{{ user.name }}</td>
<td>{{ user.surname }}</td>
<td>{{ user.group }}</td>
<tr>
</tbody>
</table>
app.ts
toSearch
users = [
{name: "john", surname: "john1", group: null},
{name: "mike", surname: "", group: 'bb'},
{name: "anne", surname: "anne1", group: ''},
{name: "dan", surname: "dan1", group: 'cc'},
{name: "ben", surname: "", group: 'a'},
]
onClick(toSearch) {
this.toSearch = toSearch
}
javascript angular filter
javascript angular filter
asked Nov 19 '18 at 13:16
Tenzolinho
22310
asked Nov 19 '18 at 13:16
Tenzolinho
22310
edited Nov 19 '18 at 13:29
asked Nov 19 '18 at 13:16
Tenzolinho
22310
asked Nov 19 '18 at 13:16
Tenzolinho
22310
asked Nov 19 '18 at 13:16
Tenzolinho
22310
22310
1
While the right answers can be found below. Thought i'd offer a few small changes you could possibly make to clean up the code. First would be to removeif (input) {statement, at this point in the code its guaranteed to be truthy as you just checked!input. Secondly you can changeObject.keys(el).map(key => el[key]);toObject.values(el).
– Michael Lynch
Nov 19 '18 at 14:02
Thank you for your tips, I changed my code as you said! :-D
– Tenzolinho
Nov 19 '18 at 14:10
add a comment |
1
While the right answers can be found below. Thought i'd offer a few small changes you could possibly make to clean up the code. First would be to removeif (input) {statement, at this point in the code its guaranteed to be truthy as you just checked!input. Secondly you can changeObject.keys(el).map(key => el[key]);toObject.values(el).
– Michael Lynch
Nov 19 '18 at 14:02
Thank you for your tips, I changed my code as you said! :-D
– Tenzolinho
Nov 19 '18 at 14:10
1
1
While the right answers can be found below. Thought i'd offer a few small changes you could possibly make to clean up the code. First would be to remove
if (input) { statement, at this point in the code its guaranteed to be truthy as you just checked !input. Secondly you can change Object.keys(el).map(key => el[key]); to Object.values(el).– Michael Lynch
Nov 19 '18 at 14:02
While the right answers can be found below. Thought i'd offer a few small changes you could possibly make to clean up the code. First would be to remove
if (input) { statement, at this point in the code its guaranteed to be truthy as you just checked !input. Secondly you can change Object.keys(el).map(key => el[key]); to Object.values(el).– Michael Lynch
Nov 19 '18 at 14:02
Thank you for your tips, I changed my code as you said! :-D
– Tenzolinho
Nov 19 '18 at 14:10
Thank you for your tips, I changed my code as you said! :-D
– Tenzolinho
Nov 19 '18 at 14:10
add a comment |
2 Answers
2
active
oldest
votes
4
Simple just check when your match is true only then send it through
import { Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
name: 'filter',
})
@Injectable()
export class CheckBoxPipe implements PipeTransform {
transform(value: any, input: string) {
if (!value) {
return ;
}
if (!input) {
return value;
}
var values =
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
values = Object.keys(el).map(key => el[key]);
let result = false;
for (var i in values) {
result = values != null && values[i] != null && values[i] != undefined && values[i].toLowerCase().indexOf(input) > -1;
if(result){
return true
}
}
return false;
})
}
return value;
}
}
answered Nov 19 '18 at 13:30
joyBlanks
3,61411036
Aah, I see what I did wrong, thank you very much!
– Tenzolinho
Nov 19 '18 at 13:32
add a comment |
1
Using ES6 operators I suggest also :
transform(value: any, input: string) {
if (!value) {
return ;
}
if (!input) {
return value;
}
var valuesArr =
if (input) {
console.log(input)
input = input.toLowerCase();
return value.filter( (el: any) => {
valuesArr = Object.keys(el).map(key => el[key]);
return valuesArr.some((elm)=> {
if (JSON.stringify(elm).includes(input)) {
return elm;
}
return null;
})
})
}
return value;
}
answered Nov 19 '18 at 13:43
selem mn
4,85541939
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375475%2fgeneral-search-pipe-angular6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
4
Simple just check when your match is true only then send it through
import { Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
name: 'filter',
})
@Injectable()
export class CheckBoxPipe implements PipeTransform {
transform(value: any, input: string) {
if (!value) {
return ;
}
if (!input) {
return value;
}
var values =
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
values = Object.keys(el).map(key => el[key]);
let result = false;
for (var i in values) {
result = values != null && values[i] != null && values[i] != undefined && values[i].toLowerCase().indexOf(input) > -1;
if(result){
return true
}
}
return false;
})
}
return value;
}
}
answered Nov 19 '18 at 13:30
joyBlanks
3,61411036
Aah, I see what I did wrong, thank you very much!
– Tenzolinho
Nov 19 '18 at 13:32
add a comment |
4
Simple just check when your match is true only then send it through
import { Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
name: 'filter',
})
@Injectable()
export class CheckBoxPipe implements PipeTransform {
transform(value: any, input: string) {
if (!value) {
return ;
}
if (!input) {
return value;
}
var values =
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
values = Object.keys(el).map(key => el[key]);
let result = false;
for (var i in values) {
result = values != null && values[i] != null && values[i] != undefined && values[i].toLowerCase().indexOf(input) > -1;
if(result){
return true
}
}
return false;
})
}
return value;
}
}
answered Nov 19 '18 at 13:30
joyBlanks
3,61411036
Aah, I see what I did wrong, thank you very much!
– Tenzolinho
Nov 19 '18 at 13:32
add a comment |
4
4
4
Simple just check when your match is true only then send it through
import { Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
name: 'filter',
})
@Injectable()
export class CheckBoxPipe implements PipeTransform {
transform(value: any, input: string) {
if (!value) {
return ;
}
if (!input) {
return value;
}
var values =
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
values = Object.keys(el).map(key => el[key]);
let result = false;
for (var i in values) {
result = values != null && values[i] != null && values[i] != undefined && values[i].toLowerCase().indexOf(input) > -1;
if(result){
return true
}
}
return false;
})
}
return value;
}
}
answered Nov 19 '18 at 13:30
joyBlanks
3,61411036
Simple just check when your match is true only then send it through
import { Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
name: 'filter',
})
@Injectable()
export class CheckBoxPipe implements PipeTransform {
transform(value: any, input: string) {
if (!value) {
return ;
}
if (!input) {
return value;
}
var values =
if (input) {
input = input.toLowerCase();
return value.filter(function (el: any) {
values = Object.keys(el).map(key => el[key]);
let result = false;
for (var i in values) {
result = values != null && values[i] != null && values[i] != undefined && values[i].toLowerCase().indexOf(input) > -1;
if(result){
return true
}
}
return false;
})
}
return value;
}
}
answered Nov 19 '18 at 13:30
joyBlanks
3,61411036
answered Nov 19 '18 at 13:30
joyBlanks
3,61411036
answered Nov 19 '18 at 13:30
joyBlanks
3,61411036
answered Nov 19 '18 at 13:30
joyBlanks
3,61411036
3,61411036
Aah, I see what I did wrong, thank you very much!
– Tenzolinho
Nov 19 '18 at 13:32
add a comment |
Aah, I see what I did wrong, thank you very much!
– Tenzolinho
Nov 19 '18 at 13:32
Aah, I see what I did wrong, thank you very much!
– Tenzolinho
Nov 19 '18 at 13:32
Aah, I see what I did wrong, thank you very much!
– Tenzolinho
Nov 19 '18 at 13:32
add a comment |
1
Using ES6 operators I suggest also :
transform(value: any, input: string) {
if (!value) {
return ;
}
if (!input) {
return value;
}
var valuesArr =
if (input) {
console.log(input)
input = input.toLowerCase();
return value.filter( (el: any) => {
valuesArr = Object.keys(el).map(key => el[key]);
return valuesArr.some((elm)=> {
if (JSON.stringify(elm).includes(input)) {
return elm;
}
return null;
})
})
}
return value;
}
answered Nov 19 '18 at 13:43
selem mn
4,85541939
add a comment |
1
Using ES6 operators I suggest also :
transform(value: any, input: string) {
if (!value) {
return ;
}
if (!input) {
return value;
}
var valuesArr =
if (input) {
console.log(input)
input = input.toLowerCase();
return value.filter( (el: any) => {
valuesArr = Object.keys(el).map(key => el[key]);
return valuesArr.some((elm)=> {
if (JSON.stringify(elm).includes(input)) {
return elm;
}
return null;
})
})
}
return value;
}
answered Nov 19 '18 at 13:43
selem mn
4,85541939
add a comment |
1
1
1
Using ES6 operators I suggest also :
transform(value: any, input: string) {
if (!value) {
return ;
}
if (!input) {
return value;
}
var valuesArr =
if (input) {
console.log(input)
input = input.toLowerCase();
return value.filter( (el: any) => {
valuesArr = Object.keys(el).map(key => el[key]);
return valuesArr.some((elm)=> {
if (JSON.stringify(elm).includes(input)) {
return elm;
}
return null;
})
})
}
return value;
}
answered Nov 19 '18 at 13:43
selem mn
4,85541939
Using ES6 operators I suggest also :
transform(value: any, input: string) {
if (!value) {
return ;
}
if (!input) {
return value;
}
var valuesArr =
if (input) {
console.log(input)
input = input.toLowerCase();
return value.filter( (el: any) => {
valuesArr = Object.keys(el).map(key => el[key]);
return valuesArr.some((elm)=> {
if (JSON.stringify(elm).includes(input)) {
return elm;
}
return null;
})
})
}
return value;
}
answered Nov 19 '18 at 13:43
selem mn
4,85541939
answered Nov 19 '18 at 13:43
selem mn
4,85541939
answered Nov 19 '18 at 13:43
selem mn
4,85541939
answered Nov 19 '18 at 13:43
selem mn
4,85541939
4,85541939
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375475%2fgeneral-search-pipe-angular6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
While the right answers can be found below. Thought i'd offer a few small changes you could possibly make to clean up the code. First would be to remove
if (input) {statement, at this point in the code its guaranteed to be truthy as you just checked!input. Secondly you can changeObject.keys(el).map(key => el[key]);toObject.values(el).– Michael Lynch
Nov 19 '18 at 14:02
Thank you for your tips, I changed my code as you said! :-D
– Tenzolinho
Nov 19 '18 at 14:10