Transfer a single property from a particular object in one array to another array of objects based on a condition (JavaScript ES6)

Question

Transfer a single property from a particular object in one array to another array of objects based on a condition (JavaScript ES6)

I have 2 sets of data arrays coming from 2 separate API calls

const data1 = [
  {
    name: 'John',
    age: 30,
    id: 1,
  },
  {
    name: 'Sarah',
    age: 28,
    id: 2,
  },
];

const data2 = [
  {
    status: 'active',
    interest: "photography",
    id: 1,
  },
  {
    status: 'inactive',
    interest: "traveling",
    id: 2,
  },
];

This is the current method I am using, but it combines the entire object from data2 to data1 if their ids match

const mergedData = data2.reduce((accumulator, current) => {
    accumulator[current.id] = current;
    return accumulator;
  }, {});

  const updatedData = data1.map((d) =>
    Object.assign(d, mergedData[d.id]) 
  );

The resulting combined data is:

{
    name: 'John',
    age: 30,
    id: 1,
status: "active",
interest: "photography"
  },
  {
    name: 'Sarah',
    age: 28,
    id: 2,
status: "inactive",
interest: "traveling"
  },

I want to transfer only the status property from the second set of data arrays into the first set where the objects' ids match

Expected outcome:

const newData = [
      {
        name: 'John',
        age: 30,
        id: 1,
        status: "active"
      },
      {
        name: 'Sarah',
        age: 28,
        id: 2,
        status: "inactive"
      },
    ];

javascript arrays object

Answer 1

Answer №1

If you want to create a new array, you can utilize the map function and use find to locate any warning that matches the corresponding id:

let data1 = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

let data2 = [
  { id: 1, occupation: 'Engineer', alert: 'Low' },
  { id: 2, occupation: 'Designer', alert: 'Medium' },
  { id: 3, occupation: 'Developer', alert: 'High' }
];

let getWarnings = (data, warningsArr) => data.map(item => {
  
  let match = warningsArr.find(warn => warn.id === item.id);
  
  return { ...item, ...(match ? { alert: match.alert } : {}) };
  
});
console.log(getWarnings(data1, data2));

Consider structuring your data with id mappings for better organization:

let data1 = {
  id1: { name: 'Alice', age: 25 },
  id2: { name: 'Bob', age: 30 },
  .
  .
  .
}

let data2 = {
  id1: { occupation: 'Engineer', alert: 'Low' },
  id2: { occupation: 'Designer', alert: 'Medium' },
  .
  .
  .
}

Answer 2

If you want to create a new array, you can utilize the map function and use find to locate any warning that matches the corresponding id:

let data1 = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

let data2 = [
  { id: 1, occupation: 'Engineer', alert: 'Low' },
  { id: 2, occupation: 'Designer', alert: 'Medium' },
  { id: 3, occupation: 'Developer', alert: 'High' }
];

let getWarnings = (data, warningsArr) => data.map(item => {
  
  let match = warningsArr.find(warn => warn.id === item.id);
  
  return { ...item, ...(match ? { alert: match.alert } : {}) };
  
});
console.log(getWarnings(data1, data2));

Consider structuring your data with id mappings for better organization:

let data1 = {
  id1: { name: 'Alice', age: 25 },
  id2: { name: 'Bob', age: 30 },
  .
  .
  .
}

let data2 = {
  id1: { occupation: 'Engineer', alert: 'Low' },
  id2: { occupation: 'Designer', alert: 'Medium' },
  .
  .
  .
}

Transfer a single property from a particular object in one array to another array of objects based on a condition (JavaScript ES6)

Answer №1

Similar questions

hiding form fields using javascript

How can we use the jQuery each loop to iterate through a JSON object, compare values to another object, and ensure that no duplicate prints occur?

Is it necessary to append the path with __dirname when utilizing Node's fs.readFile()?

Learn the steps to create a 3D carousel that spins on its own without the need for manual clicks and pauses once the

Transferring data from PHP to AJAX and then injecting it into an SQL query

The function `collect` cannot be found for the object #<Page:0x007f4f200a9350

Establish a JavaScript hyperlink to assign a value to a shared rendering parameter

Converting floating point numbers to fixed floating point numbers in JavaScript

Consolidate and then transfer to a different database

Enhancing user experience with jquery autocomplete matching

A guide to calculating the sum of columns using TypeScript and integrating it with Angular 8

Is there a way to remove array elements once in order to replace them with new ones using a for loop?

Tips for recognizing a specific object ID within an array in order to modify the status of an element within that object

Is it possible to open a new tab by clicking on an anchor tag

Having trouble with Angular's ng-tags-input? Are you getting the error message "angular is not defined"? Let

Prevent the user from selecting an option if the value is already present

Matrix calculation for bone orientation towards an object in Three.js

Embracing the node mindset with a Java foundation

What are the steps to set a 404 status code in next.js when utilizing ISR with a fallback of "blocking"?

Issue finding a route based on dates