Compare params in two object arrays

Question

I need to compare these 2 arrays to get hex.

const colours = [
 {value: 2, hex: "#9EFF9C"},
 {value: 4, hex: "#31FF00"},
 {value: 6, hex: "#FFFF00"},
];

const users = [
{name: 'John', value: 2},
{name: 'Adam', value: 4},
{name: 'James', value: 6},
];

if(colours.value === users.value) {
  // get colours.hex ... 
}

I need to pass the hex param in style for example

<h1 style={`${hexColor}`}>{user}</h1>

Use a forEach Loop and compare all the objects of the two arrays — Abaan Shanid, Apr 10 '21 at 17:33
possible duplicate of https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript — i-Need-Help, Apr 10 '21 at 17:36
users.map((user,i) => {if(user.value === colours[i].value) return
{user}
}) — Vibhav, Apr 10 '21 at 17:36

score 0 · Answer 1 · answered Apr 10 '21 at 17:35

Here is an example:

const colours = [{
    value: 2,
    hex: "#9EFF9C"
  },
  {
    value: 4,
    hex: "#31FF00"
  },
  {
    value: 6,
    hex: "#FFFF00"
  },
];

const users = [{
    name: 'John',
    value: 2
  },
  {
    name: 'Adam',
    value: 4
  },
  {
    name: 'James',
    value: 6
  },
];

users.map(user => {
  const hexColor = colours.find(color => color.value === user.value);

  return <h1 style={`color: ${hexColor}`}>{user.name}</h1>
})

score 0 · Accepted Answer · answered Apr 10 '21 at 17:51

Iterate like this:

{
    users.map(user =>
          <h1 style={{color: `${colours.find(f => f.value === user.value).hex}`}}>{user.name}</h1>
    )
}

Full source:

const colours = [
    {value: 2, hex: "#9EFF9C"},
    {value: 4, hex: "#31FF00"},
    {value: 6, hex: "#FFFF00"},
];
   
const users = [
   {name: 'John', value: 2},
   {name: 'Adam', value: 4},
   {name: 'James', value: 6},
];
   
  return (
    <div className="App">
      {
        users.map(user =>
          <h1 style={{color: `${colours.find(f => f.value === user.value).hex}`}}>{user.name}</h1>
        )
      }
    </div>
  );

Demo at CodeSandbox.

Result:

Compare params in two object arrays

{user}

2 Answers2