reactJS remove Items from an array

Question

I fetch a list of users from aws cognitio, that works perfectly.

Now I want to iterate over this array and remove those which don't match to a Client ID, that does not work properly.

what is my failure in this case?

My code looks like this:

this.awsSDKAuth().listUsers(params, (err, data) => {
 if (err) console.log(err, err.stack); // an error occurred
 else {
 let userArray = data.Users.slice(0);
 console.log(userArray);
 userArray.forEach((user,index) => {
 user.Attributes.forEach(attr => {
 if(attr.Name === "custom:client" && attr.Value !== clientId){
 userArray.splice(index,1);
 console.log(userArray);
 }
 }
 )});
 console.log(userArray);
 this.setState({
 users: userArray
 })
 }
});

Thanks

In this case I got two useres one with clientID = 36 and one with clientID = 35.

only the one with 36 should be displayed

enter image description here

Question: Should I do this recoursive? Breac the foreach when one is found and start again? maybe of wrong indexing?

• clodal: your if else statement looks like it has a weird syntax. If { } else { }. If that's fine for you then probably should show us what is the error message?
• Felix: that weired if else comes from aws ;) just copy paste, but you're right I'll fix it. Problem is that not all users that matches the second if are removed
• pizzarob: What does each user object look like ?
• Felix: added some more info above
• MukulSharma: @Felix...if you change your existing code with attr.Value !== clientId to attr.Value === clientId. Does your code works?

Answer 1

what is my failure in this case?

You are mutating array while iterating over it. Use filter instead.

this.awsSDKAuth().listUsers(params, (err, data) => {
 if (err) console.log(err, err.stack); // an error occurred
 else {
 let userArray = data.Users.slice(0)
 .filter(user => user.Attributes.some(attr => attr.Name === "custom:client" && attr.Value === clientId));
 this.setState({
 users: userArray
 })
 }
});

const userData = [{
 Attributes: [{
 name: 'custom:client',
 value: '36'
 },
 {
 name: 'FirstName',
 value: 'Keep'
 }
 ]
 },
 {
 Attributes: [{
 name: 'custom:client',
 value: '35'
 },
 {
 name: 'FirstName',
 value: 'Omit'
 }
 ]
 },
 {
 Attributes: [{
 name: 'custom:client',
 value: '36'
 },
 {
 name: 'FirstName',
 value: 'Keep'
 }
 ]
 },
 {
 Attributes: [{
 name: 'custom:client',
 value: '37'
 },
 {
 name: 'FirstName',
 value: 'Omit'
 }
 ]
 }
]
console.log(
 userData.filter(user => user.Attributes.some(attr => (attr.name === 'custom:client' && attr.value === '36')))
)

• Felix: does not work as I thought about, I get the one with ide 36 and lots of others with 35
• prabhatojha: shouldn't the condition be attr.Value === clientId
• Yury Tarabanko: @Felix Right you need attr.Value === clientId
• MukulSharma: @YuryTarabanko.... I want to understand how array mutates if we use foreach over it. Could you explain a little bit?
• Yury Tarabanko: @MukulSharma It is not forEach but splice mutates array in place. When you remove an item all indices shift.

Answer 2

This might do it for you. You can filter the users based on the criteria that the user returns an attribute that has the correct name and value.

this.awsSDKAuth().listUsers(params, (err, data) => {
 if (err) {
 console.log(err, err.stack); // an error occurred
 } else {
 this.setState({
 users: data.Users.filter(user => user.Attributes.some(attr => attr.Name === "custom:client" && attr.Value === clientID)),
 });
 }
});

• Felix: looks nice but now I got more wrong users in the array... lots of the users with client ID 35 ... only want those with 36
• pizzarob: Updated the answer
• Felix: does not work. clientID is an string (comes from aws) and I want to use clientID as a var.