reactjs how to filter / check if a any object in an array is present in another array of objects?

Question

im facing the issue when trying to implement some conditional rendering. Here is the context:

the data:

groups_a : [
             {id:1} ,
             {id:2}
            ]

groups_b : [
             {id:1} ,
             {id:3}
            ]

The condition:

I wish to be check each item in groups_b , whether they exist in groups_a . So in this case , the condition should return back true because groups_b has id:1 and so does groups_a

JSX :

            {###the condition ##
                         ?
            <Button>Approve</Button>   
            :
            null
            }

Both groups seems to be object (with incorrect syntax), it should be enclosed in [] instead of {} — Shub
– Shub, Commented Jun 1, 2020 at 9:18
groups_a and groups_b are not valid JavaScript objects. Are you sure those variables are not type of Array? Which would make more sense. — norbitrial
– norbitrial, Commented Jun 1, 2020 at 9:19
Hello i apologize , yes it should be an array , have updated my question — neowenshun
– neowenshun, Commented Jun 1, 2020 at 9:21

Hamid Shoja · Accepted Answer · 2020-06-01 14:53:35Z

4

You could do this assuming groupA/groupB to be array of object

const groupA = [{id:1}, {id:3}, {id:4}];
const groupB = [{id:1}, {id:3}];

const boolean = groupB.every(obj => groupA.find(aObj => obj.id === aObj.id));
console.log('Method 1:', boolean)
// this will be true if every object in B is included in A

// If these are extremely large arrays you can improve performance by converting groupA into obj, and then checking by that object

const groupAHashMap = groupA.reduce((acc, cur) => ({...acc, [cur.id]: true}), {});
const boolean2 = groupB.every(obj => groupAHashMap[obj.id]);
console.log('Method 2:', boolean2)

edited Jun 1, 2020 at 14:53

Hamid Shoja

4,9624 gold badges40 silver badges50 bronze badges

answered Jun 1, 2020 at 9:21

ehab

8,1741 gold badge28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

neowenshun Over a year ago

Would it be possible to use the find to return true if at least one is present?

ehab Over a year ago

@neowenshun if u want the answer one only one is present then just replace every with some, groupB.some(obj => groupA.find(aObj => obj.id === aObj.id)

Hamid Shoja Over a year ago

the second solution returns false ! @ehab

ehab Over a year ago

@HamidShoja yea thx for spotting the error, i forgot to add the initial accumulator for the reduce function

Ali Faris · Accepted Answer · 2020-06-01 09:27:43Z

0

checkout this

function App(){ 

    const groupA = [{id:1}, {id:2}];
    const groupB = [{id:1}, {id:3}];

    const gourpAIds = groupA.map(item => item.id);

    return groupB.map(item => {
        if(gourpAIds.includes(item.id)){
            return <Button>Approve</Button>   ;
        }else{
            return null;
        }
    });

}

answered Jun 1, 2020 at 9:27

Ali Faris

18.7k12 gold badges51 silver badges75 bronze badges

Comments

Hamid Shoja · Accepted Answer · 2020-06-01 14:41:40Z

0

it's an other solution that you can get the common list also.

const groupA = [{id:1}, {id:3}, {id:4}];
const groupB = [{id:1}, {id:2}];



const ListCommon = groupA.filter(x => groupB.find(y => x.id === y.id));

console.log('result:', ListCommon.length>0)
console.log('List:', ListCommon)

edited Jun 1, 2020 at 14:41

answered Jun 1, 2020 at 9:33

Hamid Shoja

4,9624 gold badges40 silver badges50 bronze badges

Collectives™ on Stack Overflow

reactjs how to filter / check if a any object in an array is present in another array of objects?

the data:

The condition:

JSX :

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

the data:

The condition:

JSX :

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related