How can I efficiently map an array based on multiple other arrays in JavaScript/TypeScript using ES6(7) without nested loops?

Question

How can I efficiently map an array based on multiple other arrays in JavaScript/TypeScript using ES6(7) without nested loops?

I am dealing with 2 arrays:

const history = [
   { type: 'change', old: 1, new: 2 },
   { type: 'change', old: 3, new: 4 },
];

const contents = [
   { id: 1, info: 'infor1' },
   { id: 2, info: 'infor2' },
   { id: 3, info: 'infor3' },
   { id: 4, info: 'infor4' },
];

The resulting array should be:

const detailHistory = [
   { type: 'change', old: { id: 1, info: 'infor1' }, new: { id: 2, info: 'infor2' } },
   { type: 'change', old: { id: 3, info: 'infor3' }, new: { id: 4, info: 'infor4' } },
];

I need help in creating detailHistory without using a nested loop with history and contents

javascript typescript ecmascript-2016

Answer 1

Answer №1

To start, create a Map for the contents, allowing you to easily retrieve objects by their id. From there, the task involves mapping the objects in the history:

const history = [
   { type: 'change', old: 1, new: 2 },
   { type: 'change', old: 3, new: 4 },
];

const contents = [
   { id: 1, info: 'infor1' },
   { id: 2, info: 'infor2' },
   { id: 3, info: 'infor3' },
   { id: 4, info: 'infor4' },
];

const contentsMap = new Map(contents.map(o => [o.id, o]));
const result = history.map(o => ({
    ...o,
    old: contentsMap.get(o.old),
    new: contentsMap.get(o.new)
}));

console.log(result);

It's important to note that when assigning values to old and new, they will reference the original objects in the contents array rather than creating copies. If this behavior is not desired, consider making (shallow) copies of the objects at the time they are mapped into the result:

const history = [
   { type: 'change', old: 1, new: 2 },
   { type: 'change', old: 3, new: 4 },
];

const contents = [
   { id: 1, info: 'infor1' },
   { id: 2, info: 'infor2' },
   { id: 3, info: 'infor3' },
   { id: 4, info: 'infor4' },
];

const contentsMap = new Map(contents.map(o => [o.id, o]));
const result = history.map(o => ({
    ...o,
    old: {...contentsMap.get(o.old)},
    new: {...contentsMap.get(o.new)}
}));

console.log(result);

Answer 2

To start, create a Map for the contents, allowing you to easily retrieve objects by their id. From there, the task involves mapping the objects in the history:

const history = [
   { type: 'change', old: 1, new: 2 },
   { type: 'change', old: 3, new: 4 },
];

const contents = [
   { id: 1, info: 'infor1' },
   { id: 2, info: 'infor2' },
   { id: 3, info: 'infor3' },
   { id: 4, info: 'infor4' },
];

const contentsMap = new Map(contents.map(o => [o.id, o]));
const result = history.map(o => ({
    ...o,
    old: contentsMap.get(o.old),
    new: contentsMap.get(o.new)
}));

console.log(result);

It's important to note that when assigning values to old and new, they will reference the original objects in the contents array rather than creating copies. If this behavior is not desired, consider making (shallow) copies of the objects at the time they are mapped into the result:

const history = [
   { type: 'change', old: 1, new: 2 },
   { type: 'change', old: 3, new: 4 },
];

const contents = [
   { id: 1, info: 'infor1' },
   { id: 2, info: 'infor2' },
   { id: 3, info: 'infor3' },
   { id: 4, info: 'infor4' },
];

const contentsMap = new Map(contents.map(o => [o.id, o]));
const result = history.map(o => ({
    ...o,
    old: {...contentsMap.get(o.old)},
    new: {...contentsMap.get(o.new)}
}));

console.log(result);

Answer 3

Answer №2

Here is a potential solution for your problem:

const history = [
  { type: "change", old: 1, new: 2 },
  { type: "change", old: 3, new: 4 }
];

const contents = [
  { id: 1, info: "infor1" },
  { id: 2, info: "infor2" },
  { id: 3, info: "infor3" },
  { id: 4, info: "infor4" }
];

let detailHistory = history.map((e, i) => {
  e.old = contents.find((element) => element.id === e.old);
  e.new = contents.find((element) => element.id === e.new);
  return e;
});
console.log(detailHistory);

Alternatively, you could utilize Object.keys() in the following manner:

const history = [
  { type: "change", old: 1, new: 2 },
  { type: "change", old: 3, new: 4 }
];

const contents = [
  { id: 1, info: "infor1" },
  { id: 2, info: "infor2" },
  { id: 3, info: "infor3" },
  { id: 4, info: "infor4" }
];

let detailHistory = history.map((e, i) => {
  Object.keys(e).map((key) => {
    e[key] = contents.find((element) => element.id === e[key])
      ? contents.find((element) => element.id === e[key])
      : e[key];
  });
  return e;
});
console.log(detailHistory);

Answer 4

Here is a potential solution for your problem:

const history = [
  { type: "change", old: 1, new: 2 },
  { type: "change", old: 3, new: 4 }
];

const contents = [
  { id: 1, info: "infor1" },
  { id: 2, info: "infor2" },
  { id: 3, info: "infor3" },
  { id: 4, info: "infor4" }
];

let detailHistory = history.map((e, i) => {
  e.old = contents.find((element) => element.id === e.old);
  e.new = contents.find((element) => element.id === e.new);
  return e;
});
console.log(detailHistory);

Alternatively, you could utilize Object.keys() in the following manner:

const history = [
  { type: "change", old: 1, new: 2 },
  { type: "change", old: 3, new: 4 }
];

const contents = [
  { id: 1, info: "infor1" },
  { id: 2, info: "infor2" },
  { id: 3, info: "infor3" },
  { id: 4, info: "infor4" }
];

let detailHistory = history.map((e, i) => {
  Object.keys(e).map((key) => {
    e[key] = contents.find((element) => element.id === e[key])
      ? contents.find((element) => element.id === e[key])
      : e[key];
  });
  return e;
});
console.log(detailHistory);

How can I efficiently map an array based on multiple other arrays in JavaScript/TypeScript using ES6(7) without nested loops?

Answer №1

Answer №2

Similar questions

Unable to forward page in EJS

Managing nested Angular repeats with counter

developing a dynamic map with javascript

What is the best way to integrate a button within a datatable cell to display additional details in a popup window?

Adding a loader to the specific button that has been clicked can be achieved by following these steps:

Most effective method for automatically scrolling down upon page load

Guide to downloading a CSV file directly from a webpage built with vue.js

Adjusting Image Size According to Window Resize?

Top guidelines for validating inherited props within React applications

Ensuring Vue.js correctly re-renders an array item

The Jquery .clone() function presents issues in Internet Explorer and Chrome browsers, failing to perform as expected

Link scripts can sometimes cause issues with node.js

Choosing the relevant kendo row on two different pages

Enabling or disabling a button dynamically in Ionic based on a conditional statement

How can I declare CSS variables in Next.js components' module.css just like in global CSS?

I can't understand why my server is displaying an error on the browser stating "This site can't be reached ERR_UNSAFE_PORT" while it is functioning flawlessly on the terminal

No definition found for state

I am currently working on a website that offers different themes, and I am attempting to update the iframe to reflect the selected theme on the site

VueJS error: Trying to access properties of undefined object ('$refs') is unsuccessful

Auth0 Angular - No routes found to match