What is the best way to combine an array with an array of objects?

Question

What is the best way to combine an array with an array of objects?

I'm working with two arrays in my code: one is called Indicators and the other is Departments.

My task is to link each department to every indicator. So, if there are 4 departments, I need to create 4 indicators, each with a different department but at the same index. How can I accomplish this?

EDIT: Here's the snippet of my code:

     let departmentArray = []
                         this.DepartmentIR.forEach(entry=>{
                            departmentArray.push(entry.Department)
                         })
                     
                        this.RisksIndicatorsIR.forEach(entry=>{   
                            let temp = {...entry}
                            temp.Departments = departmentArray    
                            console.log(temp)
                        })
                    })

javascript arrays object

Answer 1

Answer №1

const departmentsList = [
  "departmentA",
  "departmentB",
  "departmentC",
  "departmentD"
];
const metrics = [
  { name: "metrics1", id: 95 },
  { name: "metrics2", id: 92 },
  { name: "metrics3", id: 93 },
  { name: "metrics4", id: 94 }
];

// Utilizing the forEach method to assign all departments to each metric
const updatedMetrics = [];
metrics.forEach((m) =>
  updatedMetrics.push({ ...m, departments: departmentsList })
);

console.log("Updated Metrics using forEach", updatedMetrics);

// Using Reduce to add all departments to each metric
const updatedMetricsArr = metrics.reduce((acc, m) => {
  acc.push({ ...m, departments: departmentsList });
  return acc;
}, []);

console.log("Updated Metrics using Reduce", updatedMetricsArr);

// Adjusting for one department per metric 
const singleDepartmentPerMetric = metrics.reduce((acc, m, i) => {
  acc.push({ ...m, departments: departmentsList[i] });
  return acc;
}, []);

console.log("One Department Per Metric Solution", singleDepartmentPerMetric);

Answer 2

const departmentsList = [
  "departmentA",
  "departmentB",
  "departmentC",
  "departmentD"
];
const metrics = [
  { name: "metrics1", id: 95 },
  { name: "metrics2", id: 92 },
  { name: "metrics3", id: 93 },
  { name: "metrics4", id: 94 }
];

// Utilizing the forEach method to assign all departments to each metric
const updatedMetrics = [];
metrics.forEach((m) =>
  updatedMetrics.push({ ...m, departments: departmentsList })
);

console.log("Updated Metrics using forEach", updatedMetrics);

// Using Reduce to add all departments to each metric
const updatedMetricsArr = metrics.reduce((acc, m) => {
  acc.push({ ...m, departments: departmentsList });
  return acc;
}, []);

console.log("Updated Metrics using Reduce", updatedMetricsArr);

// Adjusting for one department per metric 
const singleDepartmentPerMetric = metrics.reduce((acc, m, i) => {
  acc.push({ ...m, departments: departmentsList[i] });
  return acc;
}, []);

console.log("One Department Per Metric Solution", singleDepartmentPerMetric);

What is the best way to combine an array with an array of objects?

Answer №1

Similar questions

Resizing a webpage to fit within an IFRAME

Error: Attempting to access a property called 'name' on an undefined variable leads to a TypeError

Retrieve default HTML from an AngularJS directive

How can I populate a database with an array of entities using Symfony 3?

Setting background colors for classes based on an array

Unable to access a two-dimensional array by assigning it to a pointer

Compiling C programs with large array lengths, such as 10000, can result in errors when initializing 2-dimensional arrays

Adding Angular directives to the DOM after the document has finished loading does not function properly in conjunction with ngAnimate

Encountered an issue when trying to establish the session description: An error occurred while attempting to set the remote answer SDP: Request was made in an inappropriate state

Unable to send a response once the status has been set

nodemon has encountered an issue and the app has crashed. It is now waiting for any file

What is the process of retrieving the elements of an array in MATLAB when a Java array is transferred to a MATLAB function using the MATLABcontrol API in Java?

What is the best way to make JavaScript display the strings in an array as bullet points on different lines?

Encountering an error while submitting form via Ajax to PHP backend

Caution: Anticipated the server's HTML to include a corresponding <body> within a <div> tag

Generate final string output from compiled template

Is there a way to direct the embedded YouTube video on my HTML website to open in the YouTube application instead?

Persistent navigation once fullscreen banner is completed

Trouble with Javascript file functioning correctly

What is the best way to link a URL ID to a specific piece of content stored on