I am new at reactjs and lodash. I have an array of objects which each has many field properties. I want to change a name string value if the boolean property is true. I read thru some of the posts here, seem like .map will loop thru the array
const updatedList = this.props.oldList.map((record) => record.IsTrue === 1 ? `$({record.name} (Updated)` : record.name)
I ran the test and it did not worked at all. Instead of returning list of object with all its properities, I got the following
0: "Test1 (Updated)"
1: "Test2"
There is not object with field names and values. I was expecting the following
[
{name: "Test1 (Updated)", IsTrue: 1},
{name: "Test1", IsTrue: 0}
]
Any help with lodash is appreciated.
You can use spread syntax to return the other key and value and update the name-value where isTrue is 1.
const input = [{ name: "Test1", IsTrue: 1 }, { name: "Test1", IsTrue: 0 }],
output = input.map((record) => ({
...record,
name: record.IsTrue === 1 ? `${record.name} (Updated)` : record.name
}));
console.log(output);
Related
and thanks for your attention and help,
I have a Collection in my livewire controller. This collection contains a list of players, with some properties : here we will just focus on id and name.
So we can imagine that we have 3 players in the collection :
Players[0] : 'id'=>1, 'name'=>'Yann';
Players[1] : 'id'=>2, 'name'=>'Robert';
Players[2] : 'id'=>3, 'name'=>'Jessica';
I need to get these players in my alpine data.
I can easily get these players in Alpine with the #js method :
window.addEventListener('alpine:init', () => {
Alpine.data('data', () => ({
players: #js($players),
}))
})
So, now I have in my alpine.data :
players: [
{ id: 1, name: 'Yann' },
{ id: 2, name: 'Robert' },
{ id: 3, name: 'Jessica' },
]
Now I can easily display the players in my html with a template x-for :
<template x-for="player in players">
<p x-text="player.name"></p>
</template>
But I want to add some additionnal properties in each player object. Those properties will be updated in front depending user's actions.
I would like to get something like this :
players: [
{ id: 1, name: 'Yann', touched20: 0, touched15: 0 },
{ id: 2, name: 'Robert', touched20: 0, touched15: 0 },
{ id: 3, name: 'Jessica', touched20: 0, touched15: 0 },
]
All additionnal properties are the same for each object in the array, so I imagine i could use a foreach loop to put them in the objects.
But I can't see and don't understand how i can include a loop in my alpine.data script to do this.
Anyone could help me ?
I edit my question because I found a solution :
I just make a loopPlayers function outside of my alpine data and call this function in the alpine data :
function loopPlayers() {
let players = [];
const livewirePlayers = #js($players);
livewirePlayers.forEach(element => {
players.push(element);
});
players.forEach(function(element) {
element.touched15 = 0;
})
return players;
}
And in alpine.data :
players: loopPlayers(),
Now I have my collection of players from my livewire controller & I have new properties for each element of the collection in the js data
That was easy, as usual I guess :)
I have an State varaible with array of objects like this.
type State = {
Dp: ArrayDataProvider<string, Message>;
};
Inside Dp i will have data which will hold the data in the form of array like this.
[{
"id": 1,
"name": "January",
"abc": abc,
"xyz": xyz
}, {
"id": 2,
"name": "February",
"abc": abc,
"xyz": xyz
}]
I want to replace the object which is having id 2 with the different object and i want to have my object like this .
[{
"id": 1,
"name": "January",
"abc": abc,
"xyz": xyz
}, {
"id": 2,
"name": "New month",
"abc": 1234abc,
"xyz": someVlaue
}]
how to do it in efficient way with typescript in react.
I have done something like this but not working
const data = this.state.Dp?.data.slice();
const index = data.findIndex(currentItem => {
return currentItem.id === updateData[0].id;
});
data[index] = updateData;
this.state.Dp.data = data;
this.setState({ Dp: this.state.Dp });
I use map to do this:
const data = this.state.Dp?.data.map(currentItem => {
return currentItem.id === updatedItem.id ? updatedItem : currentItem;
})
map creates a new array with the items from the previous array, but it gives you an opportunity to make adjustments to the items in the new array as it iterates through them. In my example, I'm checking the id of the item to see if it's the one you want to update, and swapping in your updatedItem if the ids match.
I'm not sure about the TypeScript part, to be honest. I haven't worked with it yet.
Note - I'm not sure what form your updateData is in, so you might have to adjust that. It seems like you want it to be an object, but in one of your lines you're treating it like an array.
Use findIndex to find index of the object where id is equal 2, then replace new object to that place.
let tempArray = [...array];
const index = tempArray.findIndex((element) => element.id === 2);
tempArray[index] = {
id: 2,
name: "New month",
abc: "1234abc",
xyz: "someVlaue"
};
setArray(tempArray);
Given the sample data, I need to transform whats given and return in tabular form. Here is the sample data. How can I get the output to be what it is below?
var revisions = {
data:[
// row 1
{
cId: {
value: "123456",
oldValue: null
},
revisionDate:{
value: "09/01/2021",
oldValue: "09/21/2021"
},
revisionType:{
value: "UPDATE",
oldValue: "DELETE"
},
revisionNote:{
value: "Some test note 0",
oldValue: "Old revision note 0"
},
financeNo:{
value: "FA1",
oldValue: "FA2"
}
},
// row 2
{
dccId: {
value: "123457",
oldValue: null
},
revisionDate:{
value: "05/01/2021",
oldValue: "09/28/2021"
},
revisionType:{
value: "NEW",
oldValue: "UPDATE"
},
revisionNote:{
value: "Some test note 1",
oldValue: "Old revision note 1"
},
financeNo:{
value: "FA4",
oldValue: "FA5"
},
maintNo:{
value: "MN001",
oldValue: "MN002"
},
isSpare:{
value: 0,
oldValue: 1
}
},
// row 3 ...
]
}
The console output should be:
[
{cId: "123456", revisionDateNew: "09/01/2021", revisionDateOld:"09/21/2021", revisionTypeNew: "UPDATE",revisionTypeOld: "DELETE", revisionNoteNew: "Some test note 0", revisionNoteOld: "Old revision note 0", financeNoNew: "FA1", financeNoOld: "FA2", maintNoNew: "", maintNoOld: "", isSpareNew: "", isSpareOld: ""},
{cId: "123457", revisionDateNew: "05/01/2021", revisionDateOld:"09/28/2021", revisionTypeNew: "NEW", revisionTypeOld: "UPDATE", revisionNoteNew: "Some test note 1", revisionNoteOld: "Old revision note 1", financeNoNew: "FA4", financeNoOld: "FA5", maintNoNew: "MN001", maintNoOld: "MN002", isSpareNew: "0", isSpareOld: "1"},
...
]
So far this is what Ive done but Im stuck on how to not hard code the properties and Im also struggling to figure out the logic needed to assign a 'New' and 'Old' to the current properties and then give those the correct values.
function loopData(revisions: any) {
var newData = revisions.data.map(item => ({
cId: item.cId.value,
revisionDateNew: item.revisionDate.value
}))
console.log(newData)
}
I think what I need is another loop maybe a forEach where I get the keys and then create a new array to push the new fields.
A general function I've used a lot objectMap to map each field in an object to some other data:
/**
* similar to Array.map but for the fields of an object.
* the callback takes the value as first argument and key as second.
* does not support passing object as 3rd argument or thisArg.
*/
export function objectMap<T, V>(obj: T, fn: (val: T[keyof T], key: keyof T) => V) {
// this is one of the cases where the as Record followed by a loop initializing all the keys
// the whole reason this function exists is to have this typesafe outside :)
// eslint-disable-next-line #typescript-eslint/consistent-type-assertions
const newObj = {} as Record<keyof T, V>;
for (const [key, val] of Object.entries(obj)) {
newObj[key as keyof T] = fn(val, key as keyof T);
}
return newObj;
}
With this you can get the correct data structure with this playground
const newData = revisions.data.map(v=>objectMap(v, x=>x?.value))
Note that it doesn't preserve the types completely as we'd need this feature to type this properly in general, you will likely want an interface to denote the type of the output anyway so this probably isn't a problem for you.
I am using a combination of filter, some, and includes to return a filtered set of documents in my MongoDB/Node back-end environment.
While I can get this to work in a mock example, when I plug it in to my actual data, I get an error.
This is the key problematic piece of code:
let filteredDocs = docs.filter(doc => doc.branches._id.some(branch => mongoArrBranchID.includes(branch._id)));
When I console.log this out with:
console.log("filteredDocs: ", filteredDocs);
I get:
Reason: TypeError: Cannot read property 'some' of undefined
I've been scratching my head trying to figure out what the issue is here. Why is my mock example working, but not this?
One thought I had was that maybe the issue is that the comparison is made with different types. So then I checked with these two lines of code to make sure the comparison is using Mongo ObjectIDs in both cases (both return true):
console.log("is param value valid: ", mongoose.Types.ObjectId.isValid(mongoArrBranchID[0])); // returns true
console.log("is doc value valid: ", mongoose.Types.ObjectId.isValid(docs[0].branches[0]._id)); // returns true
So why am I getting the TypeError: Cannot read property 'some' of undefined error here?
By the way, just so you know what the data looks like, my passed-in filter values when consoled out look like this :
console.log("mongoArrBranchID: ", mongoArrBranchID); // result below
mongoArrBranchID: [ 5ac26645121f0613be08185d, 5ac26645121f0613be08185a ]
And again, this check returns true:
console.log("is param value valid: ", mongoose.Types.ObjectId.isValid(mongoArrBranchID[0])); // returns true
My docs data looks like this when I console out the first of the docs:
console.log("doc branches: ", docs[0].branches); // result below
doc branches: [{"_id":"5ac26645121f0613be08185a","name":"New York"},{"_id":"5ac26645121f0613be08185d","name":"Los Angeles"},{"_id":"5ac26648121f0613be081862","name":"Charlotte"},{"_id":"5ac2664a121f0613be081869","name":"Chicago"},{"_id":"5ac2664a121f0613be08186e","name":"Seattle"}]
When I console out just the first branches._id value, like so:
console.log("doc branch: ", docs[0].branches[0]._id);
I get:
doc branch: 5ac26645121f0613be08185a
And again, this check on the whether the value is a valid Mongo Object ID returns true:
console.log("is doc value valid: ", mongoose.Types.ObjectId.isValid(docs[0].branches[0]._id)); // returns true
So what's the problem here? Why am I getting this error:
Reason: TypeError: Cannot read property 'some' of undefined
When I do:
let filteredDocs = docs.filter(doc => doc.branches._id.some(branch => mongoArrBranchID.includes(branch._id)));
console.log("filteredDocs: ", filteredDocs);
And for extra clarification, when I use mock data in ScratchJS in Chrome, this works for me:
let docs = [
{
_id: "5ba39a12179b771820413ad8",
name: "Samson",
branches: [{ _id: "3nc26645121f0613be08167r", name: "New York" }, { _id: "3fc26645121f0613be08185d", name: "Los Angeles" }, { _id: "2hc26648121f0613be081862", name: "Seattle" }, { _id: "7jc2664a121f0613be081869", name: "Chicago" }, { _id: "7ju2664a121f0613be08186e", name: "Charlotte" }],
updatedAt: "2018-09-20T13:01:06.709Z",
createdAt: "2018-09-20T13:01:06.709Z"
},
{ _id: "3ya39a12179b771820413af5", name: "Sarah", branches: [{ _id: "3nc26645121f0613be08167r", name: "New York" }, { _id: "5ac26645121f0613be08145d", name: "Miami" }, { _id: "5ac2664a121f0613be08154s", name: "Sacramento" }], updatedAt: "2018-09-20T13:01:06.709Z", createdAt: "2018-09-20T13:01:06.709Z" },
{ _id: "2sa39a12179b771820413gy4", name: "Tim", branches: [{ _id: "1rd26645121d5613be08167h", name: "Denver" }, { _id: "5ac2664a121f0613be08154s", name: "Sacramento" }], updatedAt: "2018-09-20T13:01:06.709Z", createdAt: "2018-09-20T13:01:06.709Z" }
];
let filterValues = ["5ac26645121f0613be08145d", "7ju2664a121f0613be08186e"];
let filteredDocs = docs.filter(doc => doc.branches.some(branch => filterValues.includes(branch._id)));
console.log(filteredDocs);
So what's the difference? Why does it work in the mock example but not with my actual data?
It is because docs.branches is an array, and therefore does not have the _id attribute you have accessed on it. You should revise your code to the following:
let filteredDocs = docs.filter(doc => doc.branches.some(branch => mongoArrBranchID.includes(branch._id)));
The error you received occurred because accessing an non-existent attribute of an object returns undefined, so doc.branches._id returned undefined, and trying to access an attribute of undefined, some in this case, throws an error.
EDIT:
I want to clarify that the mistake is you wrote doc.branches._id.some instead of doc.branches.some in your code. The issue is the _id part.
I am learning node and now I'm trying to order an array like this:
"lng" : [{
"ES" : 5,
"EN" : 3,
"IT" : 4
}]
(This is a part of a query result in MongoDB), I need to order the array by the number:
"ES" : 5,
"IT" : 4,
"EN" : 3
I used sort() but this function orders the array alphabetically by the first parameter, but I need order by the second, I've tried a lot of things but without result.
Thank you for your help!
JavaScript has no ordered objects, so first you should transform your object to an array of this kind:
[
{ key: "ES", value: 5 },
{ key: "EN", value: 3 },
{ key: "IT", value: 4 }
]
And then sort by the value key.
You can easily do it as follows:
// ("mongoDbResult" is the variable with an object you get from MongoDB)
var result = mongoDbResult.lng;
result = Object.keys(result).map(function (key) {
return { key: key, value: result[key] };
});
And then just sort by the value key:
result.sort(function (a, b) {
return (a.value < b.value) ? -1 : 1;
});
As a result, you should get a sorted array in the result variable.
Thank you Nikita, adding the key and value the sort works perfectly, my problem now is make the query to get the results with specific key and value...
I can get the elements by the KEY:
db.users.find({"lng.key" : "ES"})
Or by the VALUE:
db.users.find({"lng.value" : 5})
But not the both at the same query :/
[EDIT]
I have find the solution, $elemMatch:
db.users.find({lng_array : {$elemMatch:{key:"ES", value:5}}})