Combining arrays of objects sharing a common key yet varying in structure

Question

Combining arrays of objects sharing a common key yet varying in structure

Currently, I am facing a challenge while working on this problem using Typescript. It has been quite some time since I started working on it and I am hoping that the helpful community at StackOverflow could provide assistance :)

The scenario involves two array structures:

var localUsers = [{
    firstName: "Joe", 
    lastName: "Bloggs", 
    id: "44c021ab-be92-409b-99ad-4c3fe61d894a"
}, {
    firstName: "Pete", 
    lastName: "Doe", 
    id: "017b4dab-d58b-475e-ab31-6363d9de25c0"
}, {
    firstName: "Andy", 
    lastName: "NotRemote", 
    id: "2233e4cb-d324-463d-9a42-24b1b4cd3e11"
}]

//The above array is used for a database lookup

var remoteUsers = [{ 
    id: "44c021ab-be92-409b-99ad-4c3fe61d894a",
    timestamp: "2017-07-01T12:00:00.000"
}, {
    id: "017b4dab-d58b-475e-ab31-6363d9de25c0",
    timestamp: "2017-07-01T13:30:00.000"
}]

I am looking to merge these arrays based on the id key. All keys in remoteUsers will have a matching entry in localUsers, but the reverse may not always be true. The desired output should resemble the following:

var allUsers = [{
    firstName: "Joe", 
    lastName: "Bloggs", 
    id: "44c021ab-be92-409b-99ad-4c3fe61d894a",
    timestamp: "2017-07-01T12:00:00.000"
}, {
    firstName: "Pete", 
    lastName: "Doe", 
    id: "017b4dab-d58b-475e-ab31-6363d9de25c0",
    timestamp: "2017-07-01T13:30:00.000"
}, {
    firstName: "Andy", 
    lastName: "NotRemote", 
    id: "2233e4cb-d324-463d-9a42-24b1b4cd3e11",
    timestamp: null
}]

At the moment, I do not have access to libraries like underscore or lodash.

Thank you kindly for your assistance!

javascript arrays typescript object

Answer 1

Answer №1

Combine them using the map method

let localUsers = [{ firstName: "Joe", lastName: "Bloggs", id: "44c021ab-be92-409b-99ad-4c3fe61d894a" }, { firstName: "Pete", lastName: "Doe", id: "017b4dab-d58b-475e-ab31-6363d9de25c0" }, { firstName: "Andy", lastName: "NotRemote", id: "2233e4cb-d324-463d-9a42-24b1b4cd3e11" }]
let remoteUsers = [{ id: "44c021ab-be92-409b-99ad-4c3fe61d894a", timestamp: "2017-07-01T12:00:00.000" }, { id: "017b4dab-d58b-475e-ab31-6363d9de25c0", timestamp: "2017-07-01T13:30:00.000" }]

localUsers = localUsers.map(item => Object.assign(item, {timestamp: remoteUsers.find(user => user.id == item.id)?.timestamp}))
console.log(localUsers)

Answer 2

Combine them using the map method

let localUsers = [{ firstName: "Joe", lastName: "Bloggs", id: "44c021ab-be92-409b-99ad-4c3fe61d894a" }, { firstName: "Pete", lastName: "Doe", id: "017b4dab-d58b-475e-ab31-6363d9de25c0" }, { firstName: "Andy", lastName: "NotRemote", id: "2233e4cb-d324-463d-9a42-24b1b4cd3e11" }]
let remoteUsers = [{ id: "44c021ab-be92-409b-99ad-4c3fe61d894a", timestamp: "2017-07-01T12:00:00.000" }, { id: "017b4dab-d58b-475e-ab31-6363d9de25c0", timestamp: "2017-07-01T13:30:00.000" }]

localUsers = localUsers.map(item => Object.assign(item, {timestamp: remoteUsers.find(user => user.id == item.id)?.timestamp}))
console.log(localUsers)

Answer 3

Answer №2

I quickly put together this function, it's not optimized but gets the job done. Hopefully, this is useful. Saeed's answer seems to be more refined.

function findUserByID(id, userList) {
    var index;
    for (index = 0; index < userList.length; index++) {
        if (userList[index].id === id) {
            return userList[index];
        }
    }

    return false;
}

function combineUsers(localUsers, remoteUsers){
    var combinedList = []
    for (const user of localUsers) {
        var foundUser = findUserByID(user.id, remoteUsers);
        
        combinedList.push({
            firstName: user.firstName,
            lastName: user.lastName,
            id: user.id,
            timestamp: foundUser.id || null
        });
    }
    return combinedList;
}

Answer 4

I quickly put together this function, it's not optimized but gets the job done. Hopefully, this is useful. Saeed's answer seems to be more refined.

function findUserByID(id, userList) {
    var index;
    for (index = 0; index < userList.length; index++) {
        if (userList[index].id === id) {
            return userList[index];
        }
    }

    return false;
}

function combineUsers(localUsers, remoteUsers){
    var combinedList = []
    for (const user of localUsers) {
        var foundUser = findUserByID(user.id, remoteUsers);
        
        combinedList.push({
            firstName: user.firstName,
            lastName: user.lastName,
            id: user.id,
            timestamp: foundUser.id || null
        });
    }
    return combinedList;
}

Answer 5

Answer №3

One potential solution is to:

const localData = [{ name: "Alice", age: 30, id: "12345678" }, { name: "Bob", age: 25, id: "87654321" }]
const remoteData = [{ id: "12345678", date: "2022-01-01T12:00:00.000" }, { id: "87654321", date: "2022-01-02T13:30:00.000" }]


const removeDataObject = remoteData.reduce((accumulator, current) => (accumulator[current.id] = current, accumulator), {})
const updatedData = localData.map(item => ({ 
  ...item,
  date: null,
  ...removeDataObject[item.id],
}))

console.log(updatedData)

Answer 6

One potential solution is to:

const localData = [{ name: "Alice", age: 30, id: "12345678" }, { name: "Bob", age: 25, id: "87654321" }]
const remoteData = [{ id: "12345678", date: "2022-01-01T12:00:00.000" }, { id: "87654321", date: "2022-01-02T13:30:00.000" }]


const removeDataObject = remoteData.reduce((accumulator, current) => (accumulator[current.id] = current, accumulator), {})
const updatedData = localData.map(item => ({ 
  ...item,
  date: null,
  ...removeDataObject[item.id],
}))

console.log(updatedData)

Combining arrays of objects sharing a common key yet varying in structure

Answer №1

Answer №2

Answer №3

Similar questions

Issues with the functionality of the jQuery notify plugin are being encountered when used in a

Can text be inserted into an SWF file using ASP.NET or Javascript via an online platform?

Ag-Grid: Matching colors with filtering functionality

What are the steps for executing an API and entering data into it?

The error message "Uncaught TypeError: Cannot read property '0' of undefined" is triggered when using toDataURL

Component not refreshing when state changes occur

How can I intercept/manage the back button of the browser in React-router?

Error: Unable to access the 'then' property of an undefined object when working with promises

Mapping the response from an http.get call to create a new typed object instance in Angular 2

utilizing the identical characteristics of the parent component

Retrieve the document id along with the corresponding data from a collection

Activating JavaScript in the browser only when a button is manually clicked, not by default

Using HTML and CSS to create interactive icons that change color when clicked, similar to how a link behaves

Issue with Jquery similar to javascript createElement

I am looking to extract solely the numerical values

Use JavaScript and AJAX to easily assign multiple variables with unique IDs to an array with just one click

Concealing the Submit Button During Server Processing (Issues with Binding?)

A guide on utilizing Java's Collections to organize a list filled with objects from a class

Bringing someone else's codebase up to date from version 49 to the latest version

Is there a way to sort through an array based on a nested value?