I have Array of Object and each object have different properties inside it. What I am trying to do is filter the object in that array by its different properties but my problem is the name of the properties and number of properties are changing. How can I filter it by not declaring hard code values on it.
I have used the following code before but the number of filtering is static
events={MainObject.filter(
itemX =>
FilteringParameter["DropdownFilter2"].find(
parameter => parameter === itemX["DropdownFilter2"]
) &&
(FilteringParameter["DropdownFilter1"].find(
parameter => parameter === itemX["DropdownFilter1"]
) ||
!FilteringParameter["DropdownFilter1"].length)
)}
On my code above the "DropdownFilter1" and "DropdownFilter2" is based on a multi select dropdown and has a value based on the distinct values from my Objects
Wow I figure it out how to make it dynamic filter. I am not sure if this is the best answer but I made a loop that will filter my data each loop
let z = RawData
filterObject.map(e => {
z = z.filter(d => {
return d[e.Title] === e.Value
})
})
My filterObject holds all my dropdown value which has two properties. Title is the property name while Value holds the value of the dropdown.
Related
I have a component in which you can add or remove an option item. When I remove an option item, it is simply removed from an options list stored in state using the index value.
I would have thought that because I am using an index as the key, whenever I deleted an option item, the last element would incorrectly be removed however it seems to be working as expected.
displayedOptions = options.map((option, optionIndex) => (
<DropdownOption
option={option}
onRemoveOption={() => onRemoveOption(optionIndex)}
onChange={onChangeOption(optionIndex)}
key={optionIndex}
/>
));
const onRemoveOption = (taskIndex: number) => (optionIndex: number) => {
const newTaskFields = [...taskFields];
newTaskFields[taskIndex].options = newTaskFields[taskIndex].options.filter(
(_option, index) => {
return optionIndex !== index;
}
);
setTaskFields(newTaskFields);
};
Are there any risks to doing it this way?
Would anyone know why this is working as expected?
I thought the behaviour in my app would have been similar to what was reported here: React - Deleting from middle of list removes last element instead
That is, if I had an list that used indexes as keys containing the following values:
[a, b, c]
and I removed index 0 ('a'), I thought the diff would have been between:
Original:
[0:a, 1:b, 2:c]
and
Updated:
[0:b, 1:c]
In this case, React would see that keys 0 and 1 still exist and would continue to render a and b as it would assume these haven't changed. This would result in c disappearing (not a).
Thank you.
Your onRemoveOption is partially correct. You should shallowly copy all elements of the array/object you intend to update (mutate/remove/etc...).
Your onRemoveOption handler would then become something like:
const onRemoveOption = (taskIndex: number) => (optionIndex: number) => {
setTaskFields((tasks) =>
tasks.map((task, index) =>
index === taskIndex
? {
...task,
options: task.options.filter((_, index) => index !== optionIndex)
}
: task
)
);
};
Uses a functional state update
Maps the tasks to a new array object
If the task index matches the one you need to delete an option from, shallow copy to new object and update the options property, otherwise return the task object
If deleting an option, filter the options by index
Issue will raise while implementing sorting and Removing based on map index.
for example
let Options = [d,a,e,y];
right now Options and index looks like this way.
d 0
a 1
e 2
y 3
Removing item always apply changes from last item. Because you are not passing unique key to the item. Read diff algorithm.
But if you implement sorting and removing - it will failed in removing specific element
after sorting index will change
a 0
d 1
e 2
y 3
You can send option name instead of index.
I am rendering some items in the Flatlist where I call the renderNativeItem to render them in a ListItem and like usual I pass the values as parameter, however, I want to pass a value to subtitle from a different array.
The reason behind this is that in the ìtt parameter there are values of a users such as name, surname but in calculated_distances there are values calculated seperately in another function but which were fetched together from the same document in database.
So, when fetching from db, I set all the data to this.state.dataSource array, then I take location from that array and make a calculation and set it to this.state.calculated_distances. After this is done then I call Flatlist to render the this.state.dataSource, but the calculated distance for each user is in another array in this.state.calculated_distances.
This is basically how I ended up in this situation.
Here is the renderNativeItem function:
renderNativeItem = (itt) => {
const { calculated_distances } = this.state;
return (
<ListItem
title={itt.name + " " + itt.surname}
subtitle={calculated_distances}
/>
)
}
Set
subtitle={functionName(itt.id)}
so that
functionName gets calculated_distances with id or another value
How can ı equalize my array ıd and my value ıd and access value.name I didn't do it
This is my code:
activity(val) {
var act = this.items.map(function (val) {
if (element.ActivityID== val) {
return element.ActivityName
}
return act
});
Perhaps this?
activity (val) {
const activity = this.items.find(item => item.ActivityID === val)
return activity && activity.ActivityName
}
This just finds the item with the corresponding ActivityID and then returns its ActivityName.
Your original code contained several possible mistakes:
Two different things called val.
element doesn't appear to be defined.
The return act was inside the map callback. The activity method itself wasn't returning anything.
Not really clear why you were using map to find a single item. map is used to create a new array with the same length as the original array with each item in the new array determined by the equivalent item in the original array. It 'maps' the items of the input array to the items in the output array.
I'm manipulating an array of objects that i get from an http request containing coordinates to create markers in google-maps , but i need to eliminate all the null values in the array. I'm trying with compact but it gives back the same array unchanged.
//this is the resulting array structure
var array=
[{"id":0,"latitude":45.17850875854492,"longitude":7.773523330688477},{"id":1,"latitude":45.122344970703125,"longitude":7.7135162353515625},{"id":2,"latitude":null,"longitude":null},{"id":3,"latitude":45.11630630493164,"longitude":7.730717658996582},{"id":4,"latitude":45.116214752197266,"longitude":7.730687141418457},{"id":5,"latitude":null,"longitude":null}]
var comp =_.compact(array)
i dont get any error in the cosole , but the variable comp return the same exact array without removing null values
All your values are arrays, and the null is a value of your properties. The _.compact() method works with primitives.
Use _.reject() and check with _.isNull if the properties are null, and the object should be removed:
const array =
[{"id":0,"latitude":45.17850875854492,"longitude":7.773523330688477},{"id":1,"latitude":45.122344970703125,"longitude":7.7135162353515625},{"id":2,"latitude":null,"longitude":null},{"id":3,"latitude":45.11630630493164,"longitude":7.730717658996582},{"id":4,"latitude":45.116214752197266,"longitude":7.730687141418457},{"id":5,"latitude":null,"longitude":null}]
const result = _.reject(array, ({ latitude, longitude }) =>
_.isNull(latitude) || _.isNull(longitude)
)
console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
You can use _.pickBy()
Creates an object composed of the object properties predicate returns truthy for
lodash
This applies on object so for an array you can use that:
var comp = _.map(array, item => _.pickBy(item));
i want to check if the url contains ?query_param if so then get its value and compare that value to an id.
consider the url /path/20?query_parm=2234
and i have to get the param_id and compare it with the item id.
so i do something like below,
handle_location = (path) => {
let opened_item, param_id;
param_id = new
URLSearchParams(this.props.location.search).get('query_param');
if (this.state.items) {
opened_item = this.state.items.find(item => item.id ===
param_id);
}
};
the data structure for items is below,
items = [{
id: 2244;
attributes: something;
}
{
id: 33;
attributes: nothing;
}]
But this gives the opened_item value undefined since item.id is never equal to param_id... because of type being different.
How can i fix this...or is there a better way to find the query_param from url and get its value and use it accordingly to find the item that matches with the query_param value.
Given you understand that both data types are different, you could use avoid using strict equality and leverage type coercion which would work
item.id == param_id
The most efficient way though would be to convert param_id to the appropriate type before comparing e.g.
param_id = parseInt(param_id, 10);
It means one conversion and you can keep the strict equality
You will need to either cast both of the values to the same type(either Number or String) and then perform the comparison or you could use == operator which will try to coerce the types automatically(not recommended). You can also always fall back to some default value if none of the items matched the id.
if (this.state.items) {
opened_item = this.state.items.find(item => item.id ===
param_id) || 'some default value'
}
try this:
const param_id = this.props.match.params.id