reactjs 比较两个对象数组并使用foreach执行if条件

xdnvmnnf  于 2022-12-22  发布在  React
关注(0)|答案(3)|浏览(167)

我正在尝试比较两个对象数组,比较后我需要执行一些条件,如项目id是否在两个数组中匹配。
在此之后,我不需要返回任何东西,如果它是假的,我需要返回一些值。
我试图通过使用foreach来实现这一点,使用foreach的原因是我需要应用条件,我需要返回一些东西。
我需要检查两个数组中的每个值以应用条件。
我尝试了一些map方法,但是有些返回了一个布尔值,我无法使用它来应用条件。我使用foreach得到了部分输出,但是循环第二个数组返回了undefined。
我需要比较这两个数组,我需要找到ID相同的元素,对于这些元素,我需要返回null,对于ID不同的元素,我需要返回一些值,因此我需要比较对象数组中的每个元素,并且需要应用条件
有没有人能让我知道我错过了什么?提前感谢!

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'}
];

result1.forEach((num1, index) => {

  // console.log(num1.id) //result coming as expected

  const num2 = result2[index];
  console.log("num2", num2.id)

  // console.log(num1.id, num2.id);//here I need to compare result 1 ID and result2 id of each element

});
vfh0ocws

vfh0ocws1#

你可能会得到一个错误,因为当你迭代result的时候,你最终会得到index === 2,然后const num2 = result2[index]是未定义的,因为result2没有那么多的元素,任何像num2.id这样的元素都会抛出一个错误。
我不完全确定您要实现什么,但听起来您想迭代第一个数组,并在第二个数组中找到匹配的元素,然后如果匹配,则对它们执行操作,否则什么也不做。

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'}
];

const doSomethingWithMatches = (arr1, arr2) => {
  // Loop through each item in the first array
  arr1.forEach(item => {
    // Find an item in the second array with the same id
    const matchingItem = arr2.find(item2 => item2.id === item.id);

    // If there is a match, do something with them
    if (matchingItem) {
      console.log(item, matchingItem);
    }
  });
};

doSomethingWithMatches(result1, result2);
t5fffqht

t5fffqht2#

不确定你是否真的需要使用Array#forEach,根据你需要返回的内容,你可以使用其他的方法,比如Array#find,就像下面的演示一样,返回result1元素或者它的一个属性,或者null

const 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'}
    ],

    result2 = [
        {id:2, name:'John', email:'johnny@example.com'},
        {id:4, name:'Bobby', email:'bobby@example.com'}
    ],
    
    output = result1
        .map(({id}) => [id, result2.find(o => o.id === id) || null]);
        
console.log( output );
xkftehaa

xkftehaa3#

你可以通过id和相同的名字过滤。2然后改变这个值。

const mergedResults = result1.map((result1Item) => {
const result2Item = result2.find((item) => item.id === result1Item.id);
  return {
    ...result1Item,
    ...result2Item,
  };

输出如下:

[
  { id: 1, name: 'Sandra', type: 'user', username: 'sandra' },
  {
    id: 2,
    name: 'John',
    type: 'admin',
    username: 'johnny2',
    email: 'johnny@example.com'
  },
  { id: 3, name: 'Peter', type: 'user', username: 'pete' },
  {
    id: 4,
    name: 'Bobby',
    type: 'user',
    username: 'be_bob',
    email: 'bobby@example.com'
  }
]

相关问题