If I was to map through an array of objects of data and only wanted to render a single element from the array based on a certain condition like below:
dataArray.map((element, i) => {
if(i === currentElement){
return (
<div>{element.data}</div>
)
} else {
return null;
}
});
Would that be acceptable? this seems to return what I am after but was curious if this was the most efficient way to go about it because this still returns an array with a length of the data array with all null elements except on the desired single element.
Using map on an array will return another array with your function performed on each element, so the function you are using is literally pushing the value 'null' into the return array for any element that doesn't pass your condition. You could just use
dataArray.map((ele, i) => {
if(i === currentElement){
return (
<div>{element.data}</div>
)
}
and the map will simply do nothing with any element that does not pass the condition.
Mapping over an array in React is usually (often?) used for creating <li> tags, and React might get cranky in your console about not having a key. If you see that, check out this link here: https://reactjs.org/docs/lists-and-keys.html
You could use the find function to get the value you want to render rather than rendering a bunch of null values.
const element = dataArray.find((el, i) => i === currentElement);
if(element) {
return (<div>{element.data}</div>);
}
Related
i have below object structure like as in below image and i am trying to match with the inner object property(like massing type id) with the existing ID and if it is match i need to get the name of that object and push it to array and set that array in state object,
and the code is looks like as below
Object.values(constructionSets).forEach(item => {
console.log(item);
const constructionSetItem = [];
if (
item.ashraeClimateZone?.id === ashraeClimateZoneId &&
item.massingType?.id === massingTypeId &&
item.sourceOfData?.id === energyCodeId
) {
setConstruction(constructionSetItem.push(item.name));
}
});
and when i log item i am getting array of objects instead of single object, could any one please let me know where i am doing wrong with the above code?
thanks in advance.
From what I see in the information you gave, that constructionSets variable is already an Array so to loop it, you just need to do:
constructionSets.forEach(item => {...})
I have data where a Report has an array of Expenses, and each Expense has an array of Returns. I want to check each Return to see if it satisfies a certain condition. This works:
for (var expense of vm.report.Expenses) {
if (text === "Process") { break; }
if (expense.Returns.some(x => x.ExpenseReportId === vm.report.Id)) {
text = "Process";
}
};
However, that feels like an old way of doing things. I've tried concat, map, etc., but can't seem to get it. I just want something like this:
if (report.Expenses.Returns.some(x => ...))
I can't do that because Expenses is an array, and so is Returns. How can I easily check all of the Returns properties on all of the Expense properties of the Report?
You can use a nested Array.some(). When the predicate in the inner some returns true, both some loops would end, and return true.
Example (not tested):
if(vm.report.Expenses.some(e =>
e.Returns.some(x => x.ExpenseReportId === vm.report.Id)
)) {
text = 'Process';
}
So, Im using react and I need to keep adding objects to an array of objects (object may have the same index, thats why I check for label and index). When the object that I want to add has the same label property as one that already is in that array, it should replace the previous object. So, lets say, only one object for each label. What I have works until I work with more then one label. When I do so, the array accepts more than one objects for each label...
if (this.state.thumbnailsAtivas.some(thumbnail => {
thumbnail.index === textura.index
}) && this.state.thumbnailsAtivas.some(thumbnail => {
thumbnail.label === textura.label
})) {
console.log("already in array");
}
else if (this.state.thumbnailsAtivas.some(thumbnail => thumbnail.label === textura.label)) {
console.log("label already with item");
this.state.thumbnailsAtivas.some((thumbnail, index) => {
const tempData = (this.state.thumbnailsAtivas).slice(0);
tempData[index] = textura;
this.setState({thumbnailsAtivas: tempData})
})
} else {
this.setState({thumbnailsAtivas: [...this.state.thumbnailsAtivas, textura]},);
}
You can use another Array function called findIndex which have the same usage as some but returns a result like indexOf does (returns the index of the element in an array or -1 if no element matches):
let index = this.state.thumbnailsAtivas.findIndex(
thumbnail => thumbnail.label === textura.label
);
if(index !== -1) {
this.state.thumbnailsAtivas[index] = yourNewObject;
}
Note: To optimise your code a little bit, you could get rid of the call to some and use findIndex (once) for both checking existence and finding the index.
I am using a function to go through an array of objects and filter out the one that matches certain criteria.
var thread = underscore.find(threads, function (th) {
function result(threadArray){
threadArray.forEach(function(threads){
if (threads.owner.id === ownerId && threads.name.toLowerCase() == threadName) {
console.log(threads)
return threads
}
});
};
console.log(result(th));
return th.owner.id === ownerId && th.name.toLowerCase() === threadName;
});
'th' is the array of objects. Stepping through it, I can see that the array of objects is being iterated over using the forEach function, and that my if logic is successfully filtering out just one object because I can see it in my console "console.log(threads)", but when I try to console the return value of the function by invoking it, "console.log(result(th))", it comes back as undefined, and I can't figure out why.
I am trying to compare 2 objets using underscore, specifically I am trying to compare the key/values of "id" (because other things inside will change). I basically want to just check if object A has an item that object B does not have, remove it from object A. Here is my attempt at it :
for(var c=0;c<$scope.types.length;c++){
var real = _.some($scope.storeTempName, function(it) {
return it.id == $scope.types[c].typeId;
});
if(real){
}else{
$scope.types.splice(c,1);
}
}
Where $scope.storeTempName is object B and $scope.types is object A. So if $scope.types has something $scope.storeTempName does not, remove it (tracking by id and typyId for types).
This first attempt I have works, BUT it only will remove the first one. My guess is it's becasue I'm looping from 0 ++ and the index's are changing when i remove the first one so splice is targetting a false item. I am not sure though, and could use some help. Thank you for reading!
Just use _.filter.
$scope.types = _.filter($scope.types, function (type) {
return _.some($scope.storeTempName, function (it) { return it.id == type.typeId })
})