check if two arrays contain identical objects - react componentDidUpdate [duplicate]

Question

I am using React's componentDidUpdate lifecycle method.

I am trying to determine whether or not two arrays are the same.

My prevState array looks like this:

prevState.players = [
  {
    name: 'Wayne Rooney',
    age: 31
  }, 
  {
    name: 'Lionel Messi',
    age: 29
  },
  {
    name: 'Robbie Fowler',
    age: 42
  }
];

and the this.state array looks like this:

this.state.players = [
  {
    name: 'Wayne Rooney',
    age: 31
  }, 
  {
    name: 'Lionel Messi',
    age: 29
  },
  {
    name: 'Robbie Fowler',
    age: 42
  }
];

As you can see if you expand the snippet below they are not equal:

let playersOne = [{
    name: 'Wayne Rooney',
    age: 31
  },
  {
    name: 'Lionel Messi',
    age: 29
  },
  {
    name: 'Robbie Fowler',
    age: 42
  }
];

let playersTwo = [{
    name: 'Wayne Rooney',
    age: 31
  },
  {
    name: 'Lionel Messi',
    age: 29
  },
  {
    name: 'Robbie Fowler',
    age: 42
  }
];

console.log(playersOne == playersTwo)

And here is my react lifecycle code.

  componentDidUpdate(prevProps, prevState) {
    if(prevState.players != this.state.players) {
      this.updatePlayers(this.state);
    }
  }

can anyone advise as to the best way to determine if the arrays are equal?

Duplicates stackoverflow.com/questions/201183/… and stackoverflow.com/questions/1068834/… — Salman Arshad
– Salman Arshad, Commented Feb 6, 2018 at 9:18
One thing that React docs suggest is to use Immutable data since such comparisons can be expensive, but you still need to do it use _.isEqual from lodash or deep compare individual values — Shubham Khatri
– Shubham Khatri, Commented Feb 6, 2018 at 9:21

Dathan · Accepted Answer · 2018-02-06 09:22:14Z

45

JSON.stringify(playersOne) == JSON.stringify(playersTwo)

answered Feb 6, 2018 at 9:22

Dathan

4,6134 gold badges27 silver badges46 bronze badges

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

6 Comments

DarkArtistry Over a year ago

HAHAHAHA i love this

Fëamarto Over a year ago

This will backfire if your objects contain cyclic references. the JSON.stringify() method will not work correctly.

Adzz Over a year ago

This is also a bad idea if you care about the order of keys in an object.... JSON.stringify({a: 1, b: 2}) !== JSON.stringify({b: 2, a: 1});

Dathan Over a year ago

@Adzz your example disproves your statement, did you mean "if you don't care about the order of keys" ?

Adzz Over a year ago

Whoops, yea typo. If you think the two in the example should be equal, using JSON.stringify they would not be.

|

Bsalex · Accepted Answer · 2018-02-06 09:18:57Z

5

Using _.isEqual from lodash;
Using JSON.stringify and comparing the strings;

answered Feb 6, 2018 at 9:18

Bsalex

2,9701 gold badge18 silver badges22 bronze badges

Comments

Hassan Imam · Accepted Answer · 2018-02-06 09:26:46Z

4

You can use array#every to check if both objects have the same number of objects and each object has the same number of key and values.

let playersOne = [{ name: 'Wayne Rooney', age: 31 }, { name: 'Lionel Messi', age: 29 }, { name: 'Robbie Fowler', age: 42 } ],
    playersTwo = [{ name: 'Wayne Rooney', age: 31 }, { name: 'Lionel Messi', age: 29 }, { name: 'Robbie Fowler', age: 42 } ];
 var isSame = playersOne.length === playersTwo.length && playersOne.every((o,i) => Object.keys(o).length === Object.keys(playersTwo[i]).length && Object.keys(o).every(k => o[k] === playersTwo[i][k]));
console.log(isSame);

answered Feb 6, 2018 at 9:26

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

1 Comment

Josh M. Over a year ago

Good, but I think it would be potentially a bit more efficient to use .some and !== in the lambda to check if either of the arrays is missing an element of the other.

Mr. Polywhirl · Accepted Answer · 2021-05-07 13:56:39Z

You can use array.prototype.every :

var players = [
  { name: 'Wayne Rooney'  , age: 31 }, 
  { name: 'Lionel Messi'  , age: 29 },
  { name: 'Robbie Fowler' , age: 42 }
];

var statePlayers = [
  { name: 'Wayne Rooney'  , age: 31 }, 
  { name: 'Lionel Messi'  , age: 29 },
  { name: 'Robbie Fowler' , age: 42 }
];

var equals = players.length === statePlayers.length && players.every((e, i) => e.name === statePlayers[i].name && e.age === statePlayers[i].age);

console.log(equals);

Alternatively, using object destructuring and Array.prototype.some.

const
  players = [
    { name: 'Wayne Rooney'  , age: 31 }, 
    { name: 'Lionel Messi'  , age: 29 },
    { name: 'Robbie Fowler' , age: 42 }
  ],
  statePlayers = [
    { name: 'Wayne Rooney'  , age: 31 }, 
    { name: 'Lionel Messi'  , age: 29 },
    { name: 'Robbie Fowler' , age: 42 }
  ],
  playersEqual = (expected, actual) =>
    actual.length === expected.length &&
      !expected.some(({ name, age }, i) =>
        (({ name: otherName, age: otherAge }) =>
          name !== otherName || age !== otherAge)
        (actual[i]));

console.log(playersEqual(players, statePlayers));

Collectives™ on Stack Overflow

check if two arrays contain identical objects - react componentDidUpdate [duplicate]

4 Answers 4

6 Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

1 Comment

Comments

Linked

Related