Compare two set of object and create new set with javascript and form jsx

Question

Hi i am new to react and javascript

I have two set of objects

set1

const set1 = {
  men: { value: "men", label: "Men", type: "select" },
  women: { value: "women", label: "Women", type: "select" },
  kids: { value: "kids", label: "Kids", type: "select" },
};

and set2

const set2 = {
  men: { code: "men", title: "Men" },
  women: { code: "men", title: "Men" },
};

I want to compare both the set of object and if key is same i want to get the result as new object

const resultobj = {
  men: { value: "men", label: "Men", type: "select" },
  women: { value: "women", label: "Women", type: "select" },
};

And i want to display label from result obj in a div using jsx exmaple

return <div>{resultobj.label}</div>;

I think what you're looking for is an intersection of sets. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set no? — jmp, Jun 23 '20 at 04:10
is `resultobj` the expected result? and by which property do you compare? — Mario, Jun 23 '20 at 04:13
@Mario . Yes.and need to display label. I want to compare with the key. If key is same . Then I want to show that first set in resultsobj — Rspp, Jun 23 '20 at 04:16

Mario · Answer 1 · 2020-06-23T16:09:32.863

Please try the following example

const set1 = {
  men: { value: "men", label: "Men", type: "select" },
  women: { value: "women", label: "Women", type: "select" },
  kids: { value: "kids", label: "Kids", type: "select" },
};

const set2 = {
  men: { code: "men", title: "Men" },
  women: { code: "men", title: "Men" },
};

// get keys of both arrays
const array1 = Object.keys(set1);
const array2 = Object.keys(set2);

// get interesction
const diff = array1.filter((entry) => array2.includes(entry));

// reduce to result object
const output = diff.reduce((previousValue, currentValue) => {
  previousValue[currentValue] = set1[currentValue];

  return previousValue;
}, {});

console.log(output);

Update 0

Because you can have 1 or more results you must list them for example

return (
  <ul>
    {output.map(entry => <li>{entry.label}</li>)}
  </ul>
)

Update 1

The data you show is not properly formatted, please try the following

const data1 = {
  women: {
    value: "women",
    label: "Women",
    type: "select",
    options: {
      1: {
        label: "lady",
        value_string: "1",
      },
      2: {
        label: "girl",
        value_string: "2",
      },
    },
  },
};

for (const key in data1.women.options) {
  console.log(data1.women.options[key].label);
}

I understand you can get more than one data, if it is the case you can try the following

const data2 = {
  women: {
    value: "women",
    label: "Women",
    type: "select",
    options: {
      1: {
        label: "lady",
        value_string: "1",
      },
      2: {
        label: "girl",
        value_string: "2",
      },
    },
  },
  men: {
    value: "women",
    label: "Women",
    type: "select",
    options: {
      1: {
        label: "lady",
        value_string: "1",
      },
      2: {
        label: "girl",
        value_string: "2",
      },
    },
  },
};

for (const property in data2) {
  for (const key in data2[property].options) {
    console.log(data2[property].options[key].label);
  }
}

Now, to render in react you will need to use map, for this you can pass each object to an array in which you will then use map, see the following example

Following the logic of the second example

let output1 = [];

for (const property in data2) {
  for (const key in data2[property].options) {
    output1 = [...output1, data2[property].options[key]];
  }
}

return (
  <ul>
    output1.map(entry => <li>{entry.label}</li>)
  </ul>
)

See

This is a very common scenario, I recommend you keep reference to this answer https://stackoverflow.com/a/33034768/615274

Ok..and how I can display the label from result object in jsx?
{resultobj.label}
? — Rspp, Jun 23 '20 at 04:40
Thank you Mario. It works . I have one more query. If object women: {value: "women", label: "Women" , type: "select" "options: 1: {label: "lady", value_string: "1"} 2: {label: "girl", value_string: "2"}"} . Here i want to acess label inside option. How can i do? — Rspp, Jun 23 '20 at 05:46

aravind_reddy · Accepted Answer · 2020-06-23T04:50:41.150

1

you need to get the intersection for keys and then get first object values with intersected keys

const set1 = {
  men: { value: "men", label: "Men", type: "select" },
  women: { value: "women", label: "Women", type: "select" },
  kids: { value: "kids", label: "Kids", type: "select" },
};

const set2 = {
  men: { code: "men", title: "Men" },
  women: { code: "men", title: "Men" },
};



let keys = Object.keys(set1).filter(key => key in set2)

let result = {} 
keys.forEach((key)=>{
      result = {...result,...{[key]:set1[key]}}
})

console.log(result)

for displaying label of all the values in the object we need to iterate over the values and display them

{Object.values(result).map((value)=><div>{value.label}</div>)}

edited Jun 23 '20 at 04:50

answered Jun 23 '20 at 04:26

aravind_reddy

5,236
4
23
39

Ok I will try this. But I want to display the label from resultobj in a div. How can I do it? – Rspp Jun 23 '20 at 04:41
Yes it worked, Thak you but if women: {value: "women", label: "Women" , type: "select" "options: 1: {label: "lady", value_string: "1"} 2: {label: "girl", value_string: "2"}"} . How can i access value inside option . option has label . i want to get the label inside option. – Rspp Jun 23 '20 at 05:44
@Rspp please provide the data on how it looks or else post an another question we will be happy to help – aravind_reddy Jun 23 '20 at 05:50
I have posted the question https://stackoverflow.com/questions/62528353/access-inner-object-and-form-jsx @aravind_reddy – Rspp Jun 23 '20 at 06:07

score 0 · Answer 3 · answered Jun 23 '20 at 04:25

Use foreach and key values

const set1 = {
  men: { value: "men", label: "Men", type: "select" },
  women: { value: "women", label: "Women", type: "select" },
  kids: { value: "kids", label: "Kids", type: "select" },
};
const set2 = {
  men: { code: "men", title: "Men" },
  women: { code: "men", title: "Men" },
};
filter={}
Object.entries(set2).forEach((o)=>{
  Object.entries(set1).forEach(k=>{
       if(o[0]==k[0]) filter[k[0]]=k[1]
  })
})

console.log(filter)

Compare two set of object and create new set with javascript and form jsx

3 Answers3