React.js: How to compare data from 2 objects of arrays?

Asked
Active3 hr before
Viewed126 times

11 Answers

compareobjectsarraysreact
90%

 Pretag team - issue, fix, solve, resolve
88%

Meta Stack Overflow , Stack Overflow help chat ,Stack Overflow en español

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);
load more v
72%

var result1 = [
    {id:1, name:'Sandra', type:'user', username:'sandra'},
    {id:2, name:'John', type:'admin', username:'johnny2'},
    {id:3, name:'Peter', type:'user', username:'pete'},
    {id:4, name:'Bobby', type:'user', username:'be_bob'}
];

var result2 = [
    {id:2, name:'John', email:'johnny@example.com'},
    {id:4, name:'Bobby', email:'bobby@example.com'}
];

var props = ['id', 'name'];

var result = result1.filter(function(o1){
    // filter out (!) items in result2
    return !result2.some(function(o2){
        return o1.id === o2.id;          // assumes unique id
    });
}).map(function(o){
    // use reduce to make objects with only the required properties
    // and map to apply this to the filtered array as a whole
    return props.reduce(function(newo, name){
        newo[name] = o[name];
        return newo;
    }, {});
});

document.body.innerHTML = '<pre>' + JSON.stringify(result, null, 4) +
        '</pre>';
load more v
65%

 Pretag team - issue, fix, solve, resolve
75%

How to check if an array includes an object in JavaScript?,JavaScript Array includes() Method,JavaScript String includes() Method

load more v
40%

JSON.stringify vs Lodash's isEqual Performance,Objects are reference types so you can’t just use === or == to compare 2 objects. One quick way to compare if 2 objects have the same key value, is using JSON.stringify. Another way is using Lodash isEqual function 👏,Community SuggestionsES6 Way for comparing 2 objectsJSON.stringify vs Lodash's isEqual Performance

const k1 = {
   fruit: '🥝'
};
const k2 = {
   fruit: '🥝'
};

// Using JavaScript
JSON.stringify(k1) === JSON.stringify(k2); // true

// Using Lodash
_.isEqual(k1, k2); // true
load more v
22%

Example 1: javascript compare two arrays of objects get same elements

var result = result1.filter(function(o1) {
   return result2.some(function(o2) {
      return o1.id === o2.id; // return the ones with equal id
   });
});
// if you want to be more clever...
let result = result1.filter(o1 => result2.some(o2 => o1.id === o2.id));
load more v
60%

It is possible to compare arrays using the "every" method in javascript. A possible solution is ,Some days ago I needed to compare two arrays in Javascript and I trivially tried to compare them as if they were strings ,DEV Community – A constructive and inclusive social network for software developers. With you every step of your journey.

const serviceList = ["sales_bot"]
const botType = ["sales_bot"]
console.log(serviceList == botType)
load more v
48%

shallowCompare performs a shallow equality check on the current props and nextProps objects as well as the current state and nextState objects. It does this by iterating on the keys of the objects being compared and returning true when the values of a key in each object are not strictly equal.,shallowCompare returns true if the shallow comparison for props or state fails and therefore the component should update. shallowCompare returns false if the shallow comparison for props and state both pass and therefore the component does not need to update.,If your React component’s render function is “pure” (in other words, it renders the same result given the same props and state), you can use this helper function for a performance boost in some cases.

import shallowCompare from 'react-addons-shallow-compare'; // ES6
var shallowCompare = require('react-addons-shallow-compare'); // ES5 with npm
load more v
23%

Given 2 values x and y, the strict equality checks for equality in the following way:,Checking for array equality using javascript,If x is an object and y is a symbol, string, or number, try to convert x to a primitive using valueof() and then compare using ===.


// comparing arrays using strict equality
const a = [1, 2, 3];
const b = [1, 2, 3];

a === a;
// true
a === b;
// false (different reference)
load more v
90%

JavaScript arrays are a special type of objects, and just like regular objects, comparison of two arrays will return false even when they contain the same elements:,Learn the building blocks of JavaScript programming language like data types, functions, objects, arrays and classes.,But this method compares the arrays indirectly, and having the same values in different orders will return false instead of true. If you want to actually compare the elements of two arrays programmatically, you need to use other methods.

let arrOne = [7, 8, 9];
let arrTwo = [7, 8, 9];

console.log(arrOne === arrTwo); // false
load more v

Other "compare-objects" queries related to "React.js: How to compare data from 2 objects of arrays?"