I am making my own filter system for filtering data, and I'm building the basic functionality now, such as adding and removing filters.
Adding filters works fine, but when I play around with adding and removing, sometimes splice removes more than one filter. Why is it doing that? here is my code:
var active_filters = [];
var available_filters = [
'first_name', 'last_name', 'city'
];
var filters = {
first_name: {
title: 'First Name',
is_active: false,
types: [
{
input: 'text'
},
{
input: 'select',
options: [
'asc', 'desc'
],
values: [
'Ascending', 'Descending'
]
}
],
},
last_name: {
title: 'Last Name',
is_active: false,
types: [
{
input: 'text'
},
{
input: 'select',
options: [
'asc', 'desc'
],
values: [
'Ascending', 'Descending'
]
}
],
},
city: {
title: 'City',
is_active: false,
types: [
{
input: 'text'
},
],
},
};
var id_filters = $("#filters");
$(document).ready(function () {
id_filters.html(template_filters(filters));
});
function template_filters(filters) {
var html = '<select class="select_filters" id="select_filters" onchange="add_filter();">';
html += '<option value="0">Select Filter</option>';
for (var property in filters)
{
if (filters.hasOwnProperty(property))
{
var title = filters[property].title;
var is_active = filters[property].is_active;
var types = filters[property].types;
html += '<option value="'+property+'">'+title+'</option>';
}
}
html += '</select>';
return html;
}
function template_show_filter(filter, filter_name)
{
var html = '<div id="filter-'+filter_name+'" class="div_filter">';
html += '<span>'+filter.title+' X</span>';
html += '</div>';
return html;
}
function add_filter()
{
var select_filters = $("#select_filters");
var selected_filter = select_filters.val();
if (selected_filter != 0)
{
if (active_filters.length == 0)
{
active_filters.push(selected_filter);
id_filters.append(template_show_filter(filters[selected_filter], selected_filter));
}
else
{
if (active_filters.indexOf(selected_filter) === -1)
{
active_filters.push(selected_filter);
id_filters.append(template_show_filter(filters[selected_filter], selected_filter));
}
}
}
}
function remove_filter(filter_name)
{
var index = active_filters.indexOf(filter_name);
if (index >= 0)
{
var id = $("#filter-"+filter_name);
id.remove();
active_filters.splice(index); // here, it removes more than one
}
}
Please have a look at MDN web docs – Array.prototype.splice().
If you want to remove only one item, you should call .splice(index, 1).
If you don’t specify the second argument, “then all of the elements beginning with start index on through the end of the array will be deleted.”
This is because you are splicing at index.
active_filters.splice(index);
This will remove all elements after the index value.
Related
I have data like below:
const arr_obj = [
{
id: '1',
children: [],
type: 'TYPE1',
},
{
id: '2',
children: [
{
id: '1',
children: [
{
//some attributes
},
],
type: 'MAIN',
},
{
id: '2',
children: [
{
//some attributes
},
],
type: 'MAIN',
},
{
id: '3',
children: [
{
//some attributes
},
],
type: 'MAIN',
},
],
type: 'TYPE2',
},
{
id: '3',
children: [
{
id: '4',
children: [
{
//some attributes
},
],
type: 'MAIN',
},
{
id: '5',
children: [
{
//some attributes
},
],
type: 'MAIN',
},
{
id: '6',
children: [
{
//some attributes
},
],
type: 'MAIN',
},
],
type: 'TYPE2',
},
];
I have to find out the count of type: 'MAIN'. these 'MAIN' will be within type: 'TYPE2'
So the expected count is 6.
below is the code,
const ParentComponent = () => {
const findCount = (arr_obj) => {
let count = 0;
const expectedCount = 2;
const loop = (children) => {
for (const obj of children) {
const { type, children } = obj;
if (type === 'TYPE2') {
loop(children);
} else if (type === 'MAIN') {
++count;
if (count > expectedCount) return;
}
}
};
loop(children);
return count > expectedCount;
};
const output = findCount(arr_obj);
return (
//some jsx rendering
);
};
The above code works fine, but I want to make a loop (children) function a pure function. I am not sure how to do it.
The problem now is: I define variables outside the loop method.
How can I define everything as arguments to the function? You could move the function outside the component.
I have tried something like below to make it a pure function
const loop = (children, count = 0) => {
if (!children) return;
for (const obj of children) {
const { type, children } = obj;
if (type === 'TYPE2') {
loop(children, count + 1);
} else if (type === 'MAIN') {
++count;
if (count > expectedCount) return;
}
}
console.log('count', count); //this is 0 always when i log
return count;
};
const ParentComponent = () => {
const output = React.useMemo(() => {
return loop(arr_obj);
}, [arr_obj]);
console.log('output', output); // output is always false
return (
//some jsx rendering
)
};
Now the problem with above code is that the count is always 0. I am not sure where the problem is.
Your approach is fine: you update count by passing it as a parameter and by returning its updated value. However, the function returns at three spots and you only return count at the third spot. Furthermore, you call loop recursively, but there, you don't use its return value and you should pass count instead of count + 1 as an argument.
You need to make the following changes:
Inside loop, replace return; with return count; two times.
Inside loop, replace loop(children, count + 1); with count = loop(children, count);
Now, if you would remove if (count > expectedCount) return;, you would get 6 as the result.
I'm not sure what exactly you want but I don't think you'd need to make it complicated with recursion. You can simply achieve the same function like this:
const findCount = (arr) => {
const filteredArray = arr
.filter(el => el.type === 'TYPE2')
// removed all elements whose type is not TYPE2
.map(el => el.children)
// replaced all element with element's children array
.flat()
// flattened the array
.filter(el => el.type === 'MAIN');
// removed all elements whose type is not MAIN
return filteredArray.length;
};
I have this JSON tree view that represents a menu :
var menus = [
{
label : "1",
items: [
{
label : "1.1"
},
{
label : "1.2",
items : [
{
label : "1.2.1"
},
{
label : "1.2.2"
}
]
},
{
label : "1.3"
},
]
},
{
label : "2"
}
]
I want to mutate this JSON by adding for each item a selected property. This property, a boolean, will be set to true if the label is the right one or this is the tricky part if the descendant is the right one.
For instance, if I'm looking for label 1.2, all labels 1 and 1.2 will be selected. So I will get this JSON :
var menus = [
{
label : "1",
selected : true,
items: [
{
label : "1.1"
selected : false
},
{
label : "1.2",
selected : true,
items : [
{
label : "1.2.1"
selected : false
},
{
label : "1.2.2",
selected : false
}
]
},
{
label : "1.3",
selected : false
},
]
},
{
label : "2",
selected : false
}
]
the selected : false is not necessary.
Lodash is OK for me;)!
Any suggestions?
edit : where I am ! --> https://codepen.io/anon/pen/XGoXjM?editors=0010
edit 2 : finding elements must not be based on the way I wrote the labels. The labels can be any string... Sorry...
Thanks
This solution uses a for loop to iterate recursively the menu items and their children. If an item is selected, it adds selected: true to the item and it's parents:
const selectMenuItems = menus => selectedLabel => {
const internal = arr => {
let selected = false
for(let i = 0; i < arr.length; i++) {
const item = arr[i]
const childrenSelected = !!item.items && internal(item.items)
item.selected = childrenSelected || item.label === selectedLabel
selected = selected || item.selected
}
return selected
}
internal(menus)
return menus
}
const menus = [{"label":"1","items":[{"label":"1.1"},{"label":"1.2","items":[{"label":"1.2.1"},{"label":"1.2.2"}]},{"label":"1.3"}]},{"label":"2"}]
const menuSelector = selectMenuItems(menus)
const result = menuSelector('1.2')
console.log(result)
.as-console-wrapper { top: 0; max-height: 100% !important; }
I would simply check labels this way:
var menus = [{
label: "1",
items: [{
label: "1.1"
},
{
label: "1.2",
items: [{
label: "1.2.1"
},
{
label: "1.2.2"
}
]
},
{
label: "1.3"
},
]
},
{
label: "2"
}
];
var checkSelected = function(items, search) {
for (var key in items) {
items[key].selected = search.startsWith(items[key].label) && items[key].label.length<=search.length;
if (items[key].items) {
checkSelected(items[key].items, search);
};
};
};
var test = "1.2";
checkSelected(menus, test);
console.log(menus);
Also on JSFiddle.
The startsWith() method determines whether a string begins with the
characters of a specified string, returning true or false as
appropriate.
quoted from here
You can use some recursive approach to implement this.
let str = '1.2.1';
function checkItem(arr, strArr) {
// iterate over the array
arr.forEach((obj) => {
// set selected property based on matching every digit in label in same order
// if digits would be single then you can use startsWith and no need to split string
obj.selected = obj.label.split('.').every((it, i) => it === strArr[i]);
// if nested item is there then call recursively
obj.items && checkItem(obj.items, strArr);
});
return arr;
}
checkItem(menus, str.split('.'));
var menus = [{
label: "1",
items: [{
label: "1.1"
},
{
label: "1.2",
items: [{
label: "1.2.1"
},
{
label: "1.2.2"
}
]
},
{
label: "1.3"
},
]
},
{
label: "2"
}
];
let str = '1.2.1';
function checkItem(arr, strArr) {
arr.forEach((obj) => {
obj.selected = obj.label.split('.').every((it, i) => it === strArr[i]);
obj.items && checkItem(obj.items, strArr);
});
return arr;
}
checkItem(menus, str.split('.'));
console.log(menus);
UPADATE : Since you want to update selected property completely independent of label you can do something like follows. I assume you want to
update based on position in the array.
let str = '1.2.1';
function checkItem(arr, prefixArray, strArr) {
// iterate over the array
arr.forEach((obj, i) => {
// generate new prefix array for checking
let pa = [...prefixArray, i + 1];
// compare prefix array with the string array to check matches
obj.selected = pa.every((it, i) => it == strArr[i]);
// if items defined do it recursively
obj.items && checkItem(obj.items, pa, strArr);
});
return arr;
}
checkItem(menus,[], str.split('.'));
var menus = [{
label: "1",
items: [{
label: "1.1"
},
{
label: "1.2",
items: [{
label: "1.2.1"
},
{
label: "1.2.2"
}
]
},
{
label: "1.3"
},
]
},
{
label: "2"
}
];
let str = '1.2.1';
function checkItem(arr, prefixArray, strArr) {
arr.forEach((obj, i) => {
let pa = [...prefixArray, i + 1];
obj.selected = pa.every((it, i) => it == strArr[i]);
obj.items && checkItem(obj.items, pa, strArr);
});
return arr;
}
checkItem(menus,[], str.split('.'));
console.log(menus);
I have some objects stored in the localstorage and i want some of it to be ignored when i get the keys, i have an array to filter the keys i want to be ignored. Think of l here as the localstorage with the actual key/value, i want to ignore the bglist ,username and visitedbefore properties, i am trying to do that through looping. But only the bglist is being treated as filtered.
var l = {
'1': [{ description: 'ga', set_title: 'name this reminder' }],
bglist: [
{
author: 'Bildermeines',
images: [
'./images/bildermeines/landscape-2130844.jpg',
'./images/bildermeines/milky-way-2076251.jpg',
'./images/bildermeines/nature-2484584.jpg',
'./images/bildermeines/port-2506025.jpg',
'./images/bildermeines/waterfall-2115206.jpg',
],
},
{
author: 'Jez Timms',
images: [
'./images/jeztimms/jez-timms-157465.jpg',
'./images/jeztimms/jez-timms-158151.jpg',
'./images/jeztimms/jez-timms-178355.jpg',
],
},
{
author: 'Lubos Houska',
images: [
'./images/luboshouska/city-1134141.jpg',
'./images/luboshouska/prague-1168302.jpg',
],
},
{
author: 'oadtz',
images: [
'./images/oadtz/bangkok-1897718.jpg',
'./images/oadtz/electricity-1835546.jpg',
'./images/oadtz/star-1908593.jpg',
],
},
{
author: 'quangle',
images: [
'./images/quangle/ham-ninh-1050828.jpg',
'./images/quangle/sunrise-1014711.jpg',
],
},
{
author: 'skeeze',
images: [
'./images/skeeze/eiffel-tower-1156146.jpg',
'./images/skeeze/monument-valley-1593318.jpg',
'./images/skeeze/mountains-2228259.jpg',
],
},
],
username: 'Disgusting',
visitedbefore: false,
};
let filterArr = ['bglist', 'username', 'visitedbefore'];
let keys = Object.keys(l),
i = 0,
key,
array,
filterItem = 0;
for (; filterItem < filterArr.length; filterItem++) {
for (; (key = keys[i]); i++) {
if (filterArr[filterItem] === key) {
console.log(key + ' is filtered ' + filterArr[filterItem]);
} else {
console.log(key + ' is not filtered');
}
}
}
The following gives me an output
1 is not filtered
bglist is filtered bglist
username is not filtered
visitedbefore is not filtered
The JSON.parse() retriever can be used to easily filter the key value pairs:
var j = '{"1":[{"description":"ga","set_title":"name this reminder"}],"bglist":[{"author":"Bildermeines","images":["./images/bildermeines/landscape-2130844.jpg","./images/bildermeines/milky-way-2076251.jpg","./images/bildermeines/nature-2484584.jpg","./images/bildermeines/port-2506025.jpg","./images/bildermeines/waterfall-2115206.jpg"]},{"author":"Jez Timms","images":["./images/jeztimms/jez-timms-157465.jpg","./images/jeztimms/jez-timms-158151.jpg","./images/jeztimms/jez-timms-178355.jpg"]},{"author":"Lubos Houska","images":["./images/luboshouska/city-1134141.jpg","./images/luboshouska/prague-1168302.jpg"]},{"author":"oadtz","images":["./images/oadtz/bangkok-1897718.jpg","./images/oadtz/electricity-1835546.jpg","./images/oadtz/star-1908593.jpg"]},{"author":"quangle","images":["./images/quangle/ham-ninh-1050828.jpg","./images/quangle/sunrise-1014711.jpg"]},{"author":"skeeze","images":["./images/skeeze/eiffel-tower-1156146.jpg","./images/skeeze/monument-valley-1593318.jpg","./images/skeeze/mountains-2228259.jpg"]}],"username":"Disgusting","visitedbefore":false}'
let filters = { 'bglist': 1, 'username': 1, 'visitedbefore': 1 }
var result = JSON.parse(j, (k, v) => filters[k] ? void 0 : v)
console.log(result)
My code is as follows :
let filters = [
{name: "MAKE", values:
[
{
Volkswagen: {active: true, make: "Volkswagen"},
Skoda: {active: true, make: "Skoda"}
}
]
}
]
function getFilterValues(){
return filters.filter(f => {
if(f.name == "MAKE"){
return f.values.filter(i => {
Object.keys(i).map(key => {
return key;
});
});
}
});
}
var div = document.getElementById('output');
div.innerHTML = getFilterValues();
I want to loop through filters to get the object keys.
Thus the result that I want is, in this case Volkswagen, Skoda. But my function getFilterValues doesn't return what I want.
Here is jsfiddle.
Any advice?
The main problem is with the filter function. You want map since with filter you return true/false whether the element should be included in the resulting code. Check out this diff: https://www.diffchecker.com/CX6hOoxo
This works: https://jsfiddle.net/o93Lm0rc/101/
let filters = [
{name: "MAKE", values:
[
{
Volkswagen: {active: true, make: "Volkswagen"},
Skoda: {active: true, make: "Skoda"}
}
]
}
]
function getFilterValues(){
return filters.map(f => {
if(f.name == "MAKE"){
return f.values.map(i => {
return Object.keys(i).map(key => {
return key;
});
});
}
});
}
var div = document.getElementById('output');
div.innerHTML = getFilterValues();
You can use Object.keys() to get the list of keys.
var filters = [{
name: "MAKE",
values: [{
Volkswagen: {
active: true,
make: "Volkswagen"
},
Skoda: {
active: true,
make: "Skoda"
}
}]
}];
for (i = 0; i < filters.length; i++) {
if (typeof filters[i].values == "object") {
console.log(Object.keys(filters[i].values[0]));
}
}
I have a complex Array of Objects below, and I have a term_id to search on. I'm trying to find the matching term_id, then return the associated ticker: name from the same Object from which I found the term_id.
container = [Object, Object];
// container:
[
0: Object {
tags: [
0: {
term: "tag_name_1",
term_id: 1111
},
0: {
term: "tag_name_2",
term_id: 2222
}
],
ticker: {
name: "ticker1"
}
},
1: Object {
tags: [
0: {
term: "tag_name_3",
term_id: 3333
}
],
ticker: {
name: "ticker2"
}
}
]
How would you accomplish this? Is there an easy way with _lodash?
// You can do this with native JS:
var container = [{tags: [{term: "tag_name_1",term_id: 1111},{term: "tag_name_2",term_id: 2222}],ticker: {name: "ticker1"}},{tags: [{term: "tag_name_3",term_id: 3333}],ticker: {name: "ticker2"}}];
function search (container, id) {
var contains = false;
var result;
container.forEach(function(obj){
obj.tags.forEach(function(innerData){
if (innerData.term_id === id) {
contains = true;
}
})
if (contains) {
result = obj.ticker.name;
contains = false;
}
});
return result;
}
console.log(search(container, 1111));
You can use Array.prototype.some for this. For example:
function find(arr, t) {
var ticker = null;
arr.some(function (doc) {
var tagMatch = doc.tags.some(function (tag) {
return tag.term_id === t;
});
if (tagMatch) {
ticker = doc.ticker.name;
}
return tagMatch;
});
return ticker;
}
Here's a JSFiddle.
Hope this helps you. It's a function that you can pass your objects into and a term_id you search for and it returns found ticker names:
var objs = [
{
tags: [
{
term: "tag_name_1",
term_id: 1111
},
{
term: "tag_name_2",
term_id: 2222
}
],
ticker: {
name: "ticker1"
}
},
{
tags: [
{
term: "tag_name_3",
term_id: 3333
}
],
ticker: {
name: "ticker2"
}
}
];
function getTickerNamesById(objs,id){
var foundNames = [];
objs.forEach(function(obj){
obj.tags.forEach(function(term){
if(term.term_id===id)foundNames.push(obj.ticker.name);
});
});
return foundNames;
}
getTickerNamesById(objs,3333); // ["ticker2"]
A forEach() loop works, though there is no way to prevent it from cycling through the entire object once the id is matched. Assuming the id's are unique, a option with better performance would be the while loop:
function findId(id,container) {
var i = 0,
j;
while (i < container.length) {
j = 0;
while (j < container[i].tags.length) {
if (container[i].tags[j].term_id === id) {
return container[i].ticker.name;
}
j += 1;
}
i += 1;
}
throw "item not found";
}
If your containers will be large you may want to consider this optimization. If you preferred a functional approach, you could accomplish a similar thing with some() or every(), both of which exit out given a specified condition.