check if two arrays contain identical objects – react componentDidUpdate

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

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

Method 3

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);

Method 4

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));


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x