Combining two arrays by comparing key values in JavaScript

Question

Combining two arrays by comparing key values in JavaScript

I am dealing with two distinct arrays. The first one looks like this:

const arrOne = [
    [{sender: '0000', to: '1111'}],
    [{sender: '2222', to: '1111'}]
];

And the second array is structured as follows:

const arrTwo = [
  {
    firstName: 'John',
    lastName: 'Doe',
    num: '1111'
  }
]

My goal is to match the key to from arrOne with the num from arrTwo. If a match is found, I want to update the first array with the corresponding firstname and lastname. Therefore, the desired output should look like this:

  const arrOne = [
        [{sender: '0000', to: '1111', firstName: 'John', lastName: 'Doe'}],
        [{sender: '2222', to: '1111', firstName: 'John', lastName: 'Doe'}]
    ];

This is what I have attempted so far:

arrOne = arrOne.map(item => {
  const item2 = arrTwo.find(i2 => i2.num == item.to);
  return item2 ? { ...item, ...item2 } : item;
});

Thank you in advance for your help. Could you also provide guidance on achieving this using TypeScript?

javascript typescript

Answer 1

Answer №1

To properly handle your arrOne which is an array of arrays, it's important to consider its structure. It's also necessary to ensure that you exclude the num from elements in arrTwo based on the expected output provided.

let arrOne = [
    [{sender: '0000', to: '1111'}],
    [{sender: '2222', to: '1111'}]
];

const arrTwo = [
  {
    firstName: 'John',
    lastName: 'Doe',
    num: '1111'
  }
];

arrOne = arrOne.map(item => {
  const item2 = arrTwo.find(i2 => i2.num == item[0].to);
  return item2 ? [{ ...item[0], firstName: item2.firstName, lastName: item2.lastName }] : item;
});

console.log(arrOne);

Answer 2

To properly handle your arrOne which is an array of arrays, it's important to consider its structure. It's also necessary to ensure that you exclude the num from elements in arrTwo based on the expected output provided.

let arrOne = [
    [{sender: '0000', to: '1111'}],
    [{sender: '2222', to: '1111'}]
];

const arrTwo = [
  {
    firstName: 'John',
    lastName: 'Doe',
    num: '1111'
  }
];

arrOne = arrOne.map(item => {
  const item2 = arrTwo.find(i2 => i2.num == item[0].to);
  return item2 ? [{ ...item[0], firstName: item2.firstName, lastName: item2.lastName }] : item;
});

console.log(arrOne);

Answer 3

Answer №2

You are on the verge of success, just make a small adjustment by changing item to item[0] (since data in arrOne is nested array) and remember to add [] to enclose the returned result.

let arrOne = [
    [{sender: '0000', to: '1111'}],
    [{sender: '2222', to: '1111'}]
]; // this is a nested array
const arrTwo = [
  {
    firstName: 'John',
    LastName: 'Doe',
    num: '1111'
  }
]

arrOne = arrOne.map(item => {
  const item2 = arrTwo.find(i2 => i2.num == item[0].to)
  return item2 ? [{ ...item[0], ...item2 }] : [item[0]]; // ensure it's returned as an array
});

console.log(arrOne)

Answer 4

You are on the verge of success, just make a small adjustment by changing item to item[0] (since data in arrOne is nested array) and remember to add [] to enclose the returned result.

let arrOne = [
    [{sender: '0000', to: '1111'}],
    [{sender: '2222', to: '1111'}]
]; // this is a nested array
const arrTwo = [
  {
    firstName: 'John',
    LastName: 'Doe',
    num: '1111'
  }
]

arrOne = arrOne.map(item => {
  const item2 = arrTwo.find(i2 => i2.num == item[0].to)
  return item2 ? [{ ...item[0], ...item2 }] : [item[0]]; // ensure it's returned as an array
});

console.log(arrOne)

Answer 5

Answer №3

Give this code a shot,

 const arrOne = [
    [{ sender: "0000", to: "1111" }],
    [{ sender: "2222", to: "1111" }],
  ];
  const arrTwo = [
    {
      firstName: "John",
      LastName: "Doe",
      num: "1111",
    },
  ];
  const newarrtt = () => {
    let val;
    const newarry = arrOne.map(item => {
      val = arrTwo.find(x => {
        return x.num, item[0].to;
      });

      if (val) {
        return [
          {
            ...item[0],
            firstName: val.firstName,
            LastName: val.LastName,
          },
        ];
      }

      val = null;
    });
    console.log(newarry);
  };
  newarrtt();

The key point here is that your map function isn't returning an object but an array. Therefore, you need to access it as item[0].

Answer 6

Give this code a shot,

 const arrOne = [
    [{ sender: "0000", to: "1111" }],
    [{ sender: "2222", to: "1111" }],
  ];
  const arrTwo = [
    {
      firstName: "John",
      LastName: "Doe",
      num: "1111",
    },
  ];
  const newarrtt = () => {
    let val;
    const newarry = arrOne.map(item => {
      val = arrTwo.find(x => {
        return x.num, item[0].to;
      });

      if (val) {
        return [
          {
            ...item[0],
            firstName: val.firstName,
            LastName: val.LastName,
          },
        ];
      }

      val = null;
    });
    console.log(newarry);
  };
  newarrtt();

The key point here is that your map function isn't returning an object but an array. Therefore, you need to access it as item[0].

Answer 7

Answer №4

This method effectively removes the undesired 'num' property:

const arrOne = [[{sender: '0000', to: '1111'}],[{sender: '2222', to: '1111'}]];
const arrTwo = [{firstName: 'John', LastName: 'Doe',num: '1111'}];
console.log(arrOne.map(i=>[{...i[0], ...Object.fromEntries(Object.entries(
  arrTwo.find(j=>j.num===i[0].to)??{}).filter(([k,v])=>k!=='num')
    .map(([k,v])=>[k==='LastName'?'lastName':k, v]))}]));

To change the name of the 'LastName' property to 'lastName', you can also use this approach:

const arrOne = [[{sender: '0000', to: '1111'}],[{sender: '2222', to: '1111'}]];
const arrTwo = [{firstName: 'John', LastName: 'Doe',num: '1111'}];
console.log(arrOne.map((i,o)=>[{...i[0], ...(o=(arrTwo.find(j=>j.num===i[0].to)),
    (!o?{}:{firstName: o.firstName, lastName: o.LastName}))}]));

Both methods are robust in scenarios where a matching num is not found.

Answer 8

This method effectively removes the undesired 'num' property:

const arrOne = [[{sender: '0000', to: '1111'}],[{sender: '2222', to: '1111'}]];
const arrTwo = [{firstName: 'John', LastName: 'Doe',num: '1111'}];
console.log(arrOne.map(i=>[{...i[0], ...Object.fromEntries(Object.entries(
  arrTwo.find(j=>j.num===i[0].to)??{}).filter(([k,v])=>k!=='num')
    .map(([k,v])=>[k==='LastName'?'lastName':k, v]))}]));

To change the name of the 'LastName' property to 'lastName', you can also use this approach:

const arrOne = [[{sender: '0000', to: '1111'}],[{sender: '2222', to: '1111'}]];
const arrTwo = [{firstName: 'John', LastName: 'Doe',num: '1111'}];
console.log(arrOne.map((i,o)=>[{...i[0], ...(o=(arrTwo.find(j=>j.num===i[0].to)),
    (!o?{}:{firstName: o.firstName, lastName: o.LastName}))}]));

Both methods are robust in scenarios where a matching num is not found.

Answer 9

Answer №5

An iteration using forEach method

const dataArr = [
   [{name: 'Alice', age: 30}],
   [{name: 'Bob', age: 25}]
];

const infoArr = [
   {
      name: 'Alice',
      profession: 'Teacher'
   }
];

dataArr.forEach(data => {
   const item = infoArr.find(info => info.name === data[0].name);
   if(item) data[0] = { ...data[0], ...item };
});

console.log(dataArr);

Answer 10

An iteration using forEach method

const dataArr = [
   [{name: 'Alice', age: 30}],
   [{name: 'Bob', age: 25}]
];

const infoArr = [
   {
      name: 'Alice',
      profession: 'Teacher'
   }
];

dataArr.forEach(data => {
   const item = infoArr.find(info => info.name === data[0].name);
   if(item) data[0] = { ...data[0], ...item };
});

console.log(dataArr);

Combining two arrays by comparing key values in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

I recently installed Syncfusion but am having trouble running the demo code. If anyone has experience with this and can help me troubleshoot, please reach out. I keep encountering an error message

A guide to implementing X-Frame-Options in an express.js web application using node.js

How to retrieve a value from an array using a specific name rather than a numerical key

experiencing an excessive amount of rerenders when trying to utilize the

Struggling to successfully toggle the visibility of items

Exporting data from JSON to a CSV file

Show and hide menu items without automatically scrolling the user back to the top of the page

Retrieving information from BlobStorage using Service.ts and triggering the NgOnit function

What is the best way to ensure PyScript is completely initialized, including the environment?

Loop through a collection of elements of a certain kind and selectively transfer only certain items to a different collection of a different kind

Use Regular Expressions to escape a quotation mark inside a pattern

Creating a Checkbox-enabled Muiv5 TreeView for an array of objects: Step-by-step guide

Error: The fetch request was unsuccessful [NextJS API]

Building an accordion collapse feature in HTML using CSS and JavaScript

React import syntax using dot notation

The source property in the Nextjs Image tag is not valid

Unable to Retrieve JSON data from server and storing it in a Javascript Array

I have been struggling to make react-hook-form validate my input correctly ever since I moved the input to its own component

Updating tokens in NodeJS can be achieved by utilizing the router.use function

What strategies can I implement to enhance the efficiency of my search suggestions?