Создать новый массив, сравнив два массива в реакции, не затрагивая существующие

У меня есть DataArray1 и DataArray2, сравнивая оба, я пытаюсь создать новый массив, не затрагивая существующий (DataArray1).

DataArray1 = [
{
 id :'1",
 name : "sachin",
 age: "23",
 addre :"xyz",
 amount: '78',
},
{
 id :'2",
 name : "rahul",
 age: "12",
 addre :"xyz",
 amount: '23',
},
{
 id :'3",
 name : "messi",
 age: "34",
 addre :"xyz",
  amount: '230',
},
{
 id :'4",
 name : "vinay",
 age: "16",
 addre :"xyz",
  amount: '67',
}


DataArray2 = [
{
 id :'4",
 mobile : "12121" 
},
{
 id :'1",
mobile : "3434" 
}

сравнивая идентификатор обоих массивов и измененную сумму и помещая их в новый массив, не затрагивая существующий DataArray1

 if (DataArray1 && DataArray1?.length > 0 && DataArray2 && DataArray2?.length > 0) {   
          newData = DataArray1.forEach(item => {
              const matchingData = DataArray2.find(
                siteDataObj => item.id === siteDataObj.id
              );
              if (matchingData) {
                item.amount = 0; 
              } else {
                item.amount = 100; 
              } 
            });  
            
            
            }

setNewdata(newData); 

Но в этом коде существующий DataArray1 по-прежнему влияет на новое значение суммы.

Ожидаемый результат :

result = [
{
 id :'1",
 name : "sachin",
 age: "23",
 addre :"xyz",
 amount: '100',
},
{
 id :'2",
 name : "rahul",
 age: "12",
 addre :"xyz",
 amount: '0',
},
{
 id :'3",
 name : "messi",
 age: "34",
 addre :"xyz",
  amount: '0',
},
{
 id :'4",
 name : "vinay",
 age: "16",
 addre :"xyz",
  amount: '100',
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
114
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Если я правильно понимаю, вы хотите проверить, есть ли в DataArray1 какие-либо элементы, равные каким-либо соответствующим элементам в другом массиве. Если совпадение есть, сумма должна быть установлена ​​равной 100; в противном случае ему должно быть присвоено значение 0. В этом случае вы можете начать с извлечения всех ключей из второго списка и помещения их в новый список:

const DataArray2Keys = DataArray2.map(d => d.id);

затем с помощью карты создайте новый список элементов:

const updatedArr = DataArray1.map((d) => DataArray2Keys.includes(d.id) ? ({...d, amount: 100}) : ({...d, amount: 0}))

на карте мы перебираем все элементы в первом массиве и проверяем, есть ли у нас такой идентификатор во втором или нет, если есть, мы возвращаем новый объект и корректируем сумму.

проблема с вашим фрагментом кода в том, что вы изменяете свой объект внутри массива.

Ответ принят как подходящий

Вы можете сопоставить массив 1 и массив 2, как вы это делали в forEach . Затем верните вновь созданные элементы, не меняя элементы array1 или array2. Используйте ...(синтаксис расширения), чтобы получить все поля объекта, а затем установите сумму вручную в соответствии с matchingData

const DataArray1 = [
{
 id :"1",
 name : "sachin",
 age: "23",
 addre :"xyz",
 amount: "78",
},
{
 id :"2",
 name : "rahul",
 age: "12",
 addre :"xyz",
 amount: '23',
},
{
 id :"3",
 name : "messi",
 age: "34",
 addre :"xyz",
  amount: '230',
},
{
 id :"4",
 name : "vinay",
 age: "16",
 addre :"xyz",
  amount: '67',
}];

const DataArray2 = [
{
 id :"4",
 mobile : "12121" 
},
{
 id :"1",
mobile : "3434" 
}];

const newData = DataArray1.map(item => {
    const matchingData = DataArray2.some(
        siteDataObj => item.id === siteDataObj.id
    );
              
    return {
        ...item,
        amount: matchingData ? 100 : 0
    };
}); 

// setNewdata(newData);

console.info("Output:", newData);
console.info("DataArray1:", DataArray1);

Надеюсь, понятно и полезно

Это может помочь вам

const DataArray1 = [
{
id :"1",
name : "sachin",
age: "23",
addre :"xyz",
amount: '78',
},
{
id : "2",
name : "rahul",
age: "12",
addre :"xyz",
amount: '23',
},
{
id :"3",
name : "messi",
age: "34",
addre :"xyz",
 amount: '230',
},
{
id :"4",
name : "vinay",
age: "16",
addre :"xyz",
 amount: '67',
}
]


const DataArray2 = [
{
id :"4",
mobile : "12121" 
},
{
id :"1",
mobile : "3434" 
}
]

const newData = JSON.parse(JSON.stringify(DataArray1));

const setNewData = () => {
 if (DataArray1 && DataArray1?.length > 0 && DataArray2 && DataArray2?.length > 0) {
    DataArray1.forEach((item, index) => {
     const matchingData = DataArray2.find(
               siteDataObj => item.id === siteDataObj.id
             )
       if (matchingData) {
         newData[index].amount = '0'; 
       } else {
         newData[index].amount = '100'; 
       }
     });
     }
}
setNewData();

console.info("DataArray1", DataArray1);
console.info("newData", newData);

Ответы с комментариями типа «используйте это», «это может вам помочь» или вообще без объяснений считаются плохими ответами, даже если они верны и помогают решить проблему. Пожалуйста, добавьте подробную информацию о том, что вы сделали, и как это поможет решить проблему с ОП.

Chris G 19.04.2024 17:59

Вы напрямую изменяете значения в DataArray1. Когда вы перебираете каждый элемент в DataArray1, а затем устанавливаете для него значение 0 или 100 при вызове

item.amount = 

Кроме того, foreach не возвращает новый массив. Он просто модифицирует существующее. Если вы просто хотите вернуть новый массив, вы можете использовать .map(). Вместо установки item.amount вы можете скопировать элемент и вернуть измененную копию элемента. Что-то вроде этого:

const newData = DataArray1.map(item => {
   const matchingData = DataArray2.find(siteDataObj => item.id === siteDataObj.id);
   let newAmount;
   if (matchingData) {
     newAmount = 0;
   } else {
     newAmount = 100;
   }
   return {...item, amount: newAmount} <-- The ... is a spread operator and it copies the object. 
});

Просто отметим: в ожидаемом результате вы говорите, что ожидаете, что записи с идентификаторами 1 и 4 будут иметь сумму 100. Но в вашем коде, если вы найдете совпадение, вы устанавливаете сумму в 0. Таким образом, либо ожидаемый результат равен неправильно, или вам нужно сменить код и установить сумму 100, если вы найдете совпадение.

Другие вопросы по теме