-1

I am using React framework and passing a prop to a component that maintains a state. The prop and state are arrays of objects, and I want to verify whether or not there is any change between the two at some point in my code. 

  somethingHasChanged = () => {
    return !isEqual(this.props.array1.sort(), this.state.array1.sort());
  };

Where the objects in the array are defined like so:

    array1: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.string,
        name: PropTypes.string,
        label: PropTypes.string,
      }),
    ),

The id can be repeated in several objects in the array, so it does not uniquely identify one object. Name and label are optional keys in the json object but it doesn't have to be specified.

Right now I sort both arrays and then check if they are equal, but I'm seeing some weird behavior. Sometimes when I expect both arrays to be equal, they are different because the content is the same but the ordering is not the same even though I call sort() on both. Is there a better, easier/more flexible approach rather than doing a deep comparison?

Improve this question
4
  • 1
    How do you think it'll sort them w/o a comparison function? Did you try searching the web for "js compare array of objects" since you'll need a custom comparison anyway? There are multiple ways this can be done; you'd likely need to choose one based on your specific requirements, libraries/modules you're already using, etc. Commented Apr 28, 2020 at 17:56
  • Will also need to see what you are doing in isEqual. The sort is not working as you expect it to behave, because the sort function does not understand which object is bigger or smaller. Commented Apr 28, 2020 at 17:56
  • @user120242 isEqual is coming from lodash library. However i do have a question. Why would the sorting change between my prop array and state array if the content is the same? I would expect the same result at the end of calling sort() then. It makes sense to me if one array has something different than the other, but in this case (at least from what I know), both arrays are the same Commented Apr 28, 2020 at 18:00
  • I'd check to see if your state has been modified after it was copied from the prop and how. Probably want to actually console.log out the values and compare them. Commented Apr 28, 2020 at 19:06

1 Answer 1

Reset to default
0

Using plain JS something like this 

a = [{ value:"4a55eff3-1e0d-4a81-9105-3ddd7521d642", display:"Jamsheer"}, { value:"644838b3-604d-4899-8b78-09e4799f586f", display:"Muhammed"}, { value:"b6ee537a-375c-45bd-b9d4-4dd84a75041d", display:"Ravi"}, { value:"e97339e1-939d-47ab-974c-1b68c9cfb536", display:"Ajmal"},  { value:"a63a6f77-c637-454e-abf2-dfb9b543af6c", display:"Ryan"}]
b = [{ value:"4a55eff3-1e0d-4a81-9105-3ddd7521d642", display:"Jamsheer", $$hashKey:"008"}, { value:"644838b3-604d-4899-8b78-09e4799f586f", display:"Muhammed", $$hashKey:"009"}, { value:"b6ee537a-375c-45bd-b9d4-4dd84a75041d", display:"Ravi", $$hashKey:"00A"}, { value:"e97339e1-939d-47ab-974c-1b68c9cfb536", display:"Ajmal", $$hashKey:"00B"}]

function comparer(otherArray){
  return function(current){
    return otherArray.filter(function(other){
      return other.value == current.value && other.display == current.display
    }).length == 0;
  }
}

var onlyInA = a.filter(comparer(b));
var onlyInB = b.filter(comparer(a));

result = onlyInA.concat(onlyInB);

console.log(result);
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.