I am trying to filter items in a grid by tags, the data in the grid looks like this
[
{ id: 0, tags: [{ text: 'boat' }, { text: 'summer' }] },
{ id: 1, tags: [{ text: 'boat' }] },
{ id: 2, tags: [{ text: 'travel' }] },
{ id: 3, tags: [{ text: 'boat' }] },
{ id: 4, tags: [{ text: 'travel' }] },
{ id: 5, tags: [{ text: 'travel' }, { text: 'summer' }] }
]
And the function for filtering looks like this
$scope.filterGrid = function (e) {
var grid = $('#imageGrid').data('kendoGrid');
var val = [{ text: 'travel' }, { text: 'summer' }];
grid.dataSource.filter({});
if ($.trim(val) !== '') {
grid.dataSource.filter({
logic: 'or',
filters: [{
field: 'tags',
operator: function (item) {
var status = false;
for (var n = 0, length2 = val.length; n < length2; n++) {
for (var i = 0, length = item.length; i < length; i++) {
if (item[i].text.indexOf(val[n].text) !== -1) {
status = true;
break;
}
}
}
return status;
}
}]
});
}
};
With this example where val = travel, summer i would like to only show the items with both tags (id 5) but it shows all items containing either of the tags (id: 0,2,4,5)
What am i doing wrong and is there a better way to do this with kendo?
Your filter algorithm was accepting the item to have at least one of the two desired values, because the loop break when find one here:
if (item[i].text.indexOf(val[n].text) !== -1) {
status = true;
break;
}
I have changed a little your code to this:
operator: function (item) {
var found = 0;
for (var i = 0, length = item.length; i < length; i++) {
for (var n = 0, length2 = val.length; n < length2; n++) {
if (item[i].text.indexOf(val[n].text) !== -1) {
found++;
break;
}
}
}
return found == val.length;
}
It counts the total of found tags(found) and return true only if the number of found items is the same as the search items(val.length). So it starts iterating through item, and not through val, as the rule stands for the item has to be all the values, and not the way around. So for each item is performed a check if it has all val items and sum found counter. At the end, if found is equal val.length it means that all items on val are inside item.
Working demo
Related
I have an array object
MainArray = {"Data":
[{"Group": "GroupA"},{"Group": "GroupB"}]
}
then I loop through the array and created a new
let _newArray : any[] = [];
MainArray.Data.forEach(item => {
_newArray.push({
groupname : item.Group,
columns: ["column1","column2","column3"]
});
//loop through _newArray.columns
});
then I need to loop through the columns of new Array inside the Main Array loop
and push an array from another..
SecondArray = [{group: "GroupA", value: "firstfield", count: 14 },{group: "GroupA", field: "secondfield", count:23 },{group: "GroupB", field: "randomfield", count:1 }]
so the output should be
_newArray = [{
groupname: "GroupA",
columns: ["column1","column2","column3"]
col1: [{"firstfield":14, "secondfield": 23 }]
col2: "",
col3: ""
},{GroupB...}]
what I tried:
Object.keys( _newArray[0].columns).forEach( function(value, key) {
console.log(this._SecondArray[item.Group])
// push 'col + index: [Second Array]'
});
In your SecondArray the first object is having a 'value' key. I assumed it as "field"
let MainArray = {
"Data":
[{ "Group": "GroupA" }, { "Group": "GroupB" }]
}
// First push
let _newArray = [];
MainArray.Data.forEach(item => {
_newArray.push({
'groupname': item.Group,
'columns': ["column1", "column2", "column3"]
})
})
let SecondArray = [{ group: "GroupA", field: "firstfield", count: 14 }, { group: "GroupA", field: "secondfield", count: 23 }, { group: "GroupB", field: "randomfield", count: 1 }];
// Second push
_newArray.forEach(item => {
console.log(item)
let i = 1;
item.columns.forEach(cols => {
console.log(cols)
if (i == 1) {
item["col" + i] = {}
SecondArray.forEach(subItem => {
console.log(subItem)
if (subItem.group == item.groupname) {
item["col" + i][subItem.field] = subItem.count
}
})
i++
} else {
item["col" + i++] = ""
}
})
})
console.log(_newArray);
I have a group of arrays on my Angular2 app that I use to build a grouped list with *ngFor in my view:
[
{
category: 1,
items: [{ id: 1, name: "helloworld1" }, { id: 2, name: "helloworld2" }]
},
{
category: 2,
items: [{ id: 3, name: "helloworld3" }, { id: 4 }]
},
{
category: 3,
items:[{ id: 5 }, { id: 6 }]
}
]
I also have a boolean that when it's true should filter only the items that have the name property. If a group does not have any item that matches this condition it should not pass. So the result would be the following if the boolean is true:
[
{
category: 1,
items: [{ id: 1, name: "helloworld1" }, { id: 2, name: "helloworld2" }]
},
{
category: 2,
items: [{ id: 3, name: "helloworld3" }]
}
]
How can I implement a pipe to achieve this kind of result?
http://plnkr.co/edit/je2RioK9pfKxiZg7ljVg?p=preview
#Pipe({name: 'filterName'})
export class FilterNamePipe implements PipeTransform {
transform(items: any[], checkName: boolean): number {
if(items === null) return [];
let ret = [];
items.forEach(function (item) {
let ret1 = item.items.filter(function (e) {
return !checkName || (checkName && (e.name !== undefined));
});
if(ret1.length > 0) {
item.items = ret1;
ret.push(item);
}
});
return ret;
}
}
I have scope like below
$scope.phones = [
{
id: 4,
name: "nokia",
accessories: [
{id: 1, name: "headset"},
{id: 3, name: "keyboard"},
{id: 5, name: "charger"}
]
},
{
id: 5,
name: "samsung",
accessories: [
{id: 5, name: "charger"}
]
},
{
id: 6,
name: "iphone",
accessories: [
{id: 1, name: "headset"},
{id: 5, name: "charger"}
]
}
];
For example they are displayed like
-> Phone name
-> accesories
Now my case
If I update accessory that is in relation with phone I want to update records that are displayed but only those that are in relation with updated accessory. I don't want to update whole action view but only records that are bound with the updated accessory
How can I do that ?
// edit
I've created a manual workaround
$scope.editAcc = function (idx) {
for(var i = 0; i < $scope.phones.length; i++) {
var tmpPhone = $scope.phones[i];
for(var j = 0; j < tmpPhone.accessories.length; j++) {
var acc = tmpPhone.accessories[j];
if(acc.id == idx) {
acc.name = acc.name + " Z";
}
}
}
// var acc = $scope.accessories[idx];
// acc.name = acc.name + " X";
};
But IMO there should be some function to do that
I don't think there is a built-in way to update the value by JSON path, but you can at least use angular.forEach() to loop through the collections:
$scope.editAcc = function (idx) {
angular.forEach($scope.phones, function (t) {
angular.forEach(t.accessories, function(acc){
(acc.id == idx) ? (acc.name += " Z") : null;
});
});
}
DEMO
Have you ever make a checkbox column in Handsontable?
I try to use every way to do it, but it's not working.
When user click checkbox on header, all row in column was be checked.
Thanks for any help.
You can create a checkbox column by simply setting the column type option to 'checkbox'.
var $container = $("#example1");
$container.handsontable({
data: data,
startRows: 5,
colHeaders: true,
minSpareRows: 1,
columns: [
{data: "id", type: 'text'},
//'text' is default, you don't actually have to declare it
{data: "isActive", type: 'checkbox'},
{data: "date", type: 'date'},
{data: "color",
type: 'autocomplete',
source: ["yellow", "red", "orange", "green", "blue", "gray", "black", "white"]
}
]
});
For more detail see this example
HTML:
<div id="example2" class="handsontable"></div>
Javascript:
var myData = [{
name: "Marcin",
active: true
}, {
name: "Jude",
active: false
}, {
name: "Zylbert",
active: false
}, {
name: "Henry",
active: false
}]
var $container = $("#example2");
$container.handsontable({
data: myData,
rowHeaders: true,
columns: [{
data: 'name'
}, {
type: 'checkbox',
data: 'active'
}],
colHeaders: function (col) {
switch (col) {
case 0:
return "<b>Bold</b> and <em>Beautiful</em>";
case 1:
var txt = "<input type='checkbox' class='checker' ";
txt += isChecked() ? 'checked="checked"' : '';
txt += "> Select all";
return txt;
}
}
});
$container.on('mouseup', 'input.checker', function (event) {
var current = !$('input.checker').is(':checked'); //returns boolean
for (var i = 0, ilen = myData.length; i < ilen; i++) {
myData[i].active = current;
}
$container.handsontable('render');
});
function isChecked() {
for (var i = 0, ilen = myData.length; i < ilen; i++) {
if (!myData[i].active) {
return false;
}
}
return true;
}
Here's the example you're looking for
http://jsfiddle.net/yr2up2w5/
Hope this helps you.
There's now a checkbox tutorial in the Handsontable documentation.
How to remove item from array B if array A has it. I want to iterate through by ID.
array A: it has all the items
[{
"Name":"John",
"Id":1
},
{
"Name":"Peter",
"Id":2
},
{
"Name":"Phillip",
"Id":3
},
{
"Name":"Abby",
"Id":4
},
{
"Name":"Don",
"Id":5
}]
array B: has just the selected items
[{
"Name":"John",
"Id":1
},
{
"Name":"Abby",
"Id":4
}]
I want to remove from array A John and Abby by Id, because they are in array b.
for (var i = 0; i < a.length; i++) {
if (b[i].Id == ta[i].Id) {
for (var j = 0; j < b[j]; j++) {
a.splice(i, 1);
}
}
}
this is not working as I thought
You could first get all id's of person objects in b:
let idsInB: number[] = b.map(person => person.Id); // > [1, 4]
This array of id's can be used to filter a, and then assign the result back to a. Let's contain that in a function cleanA:
function cleanA(): void {
let idsInB: number[] = b.map(person => person.Id);
a = a.filter((person) => -1 === idsInB.indexOf(person.Id));
}
All you need to do now is call cleanA whenever the contents of b changes.
Full working example:
interface Person {
Id: number;
Name: string;
}
let a: Person[] = [
{ Id: 1, Name: "John" },
{ Id: 2, Name: "Peter" },
{ Id: 3, Name: "Phillip" },
{ Id: 4, Name: "Abby" },
{ Id: 5, Name: "Don" },
];
let b: Person[] = [
{ Id: 1, Name: "John" },
{ Id: 4, Name: "Abby" },
];
function cleanA(): void {
let idsInB: number[] = b.map(person => person.Id);
a = a.filter((person) => -1 === idsInB.indexOf(person.Id));
}
presentArray(a, 'A before clean');
cleanA();
presentArray(a, 'A after clean');
// -------------------------------------------------------
// Displaying purposes only:
// -------------------------------------------------------
function presentArray(arr, msg) {
document.body.innerHTML += `<br><b>${msg}:</b><br>[<br>`
+ arr.map(person => ` { Id: ${person.Id}, Name: ${person.Name} },<br>`)
.join('')
+ ' ]<br><br>';
}