A guide to checking an array of objects by their ID and assigning a new property using JavaScript

Question

A guide to checking an array of objects by their ID and assigning a new property using JavaScript

I am working with two arrays of objects called arr1 and arr2

If the ID in both arr1 and arr2 matches, I want to add the property names from arr1 to arr2 using JavaScript

var arr1 = [
  {id: 1, name : "Helena"},
  {id: 2, name : "John"}
]

var arr2 = [{ 
  country: "MY", 
  details: [{
    mode: "parttime",
    members:[{id:1}, {id: 2}]
  }]
}]

The expected output should look like this:

[{ 
  country: "MY", 
  details:[{
    mode: "parttime",
    members: [
      {id:1, name: "Helena"},
      {id: 2, name: "john"}
    ]
  }]
}]

javascript arrays object

Answer 1

Answer №1

Take a look at this:

var arr1 = [
  {
    id: 1,
    name: "Sarah",
  },
  {
    id: 2,
    name: "Michael",
  },
];

var arr2 = [
  {
    country: "US",
    details: [
      {
        mode: "full-time",
        members: [
          {
            id: 1,
          },
          {
            id: 2,
          },
        ],
      },
    ],
  },
];

function getPeopleByCountry(teamArr, countriesArr) {
  // map each country object in the array to a new country
  return countriesArr.map((country) => {
    return {
      ...country, 
      // modify country.details by mapping it to a new object
      details: country.details.map((detail) => {
        return {
          ...detail, 
          // modifying members
          members: detail.members.map((member) => {
            const memberObj = { ...member };
            // check if name exists for this member
            const name = teamArr.find((i) => i.id === member.id).name;
            if (name) {
              memberObj.name = name;
            }
            return memberObj;
          }),
        };
      }),
    };
  });
}

console.log(getPeopleByCountry(arr1, arr2));

Answer 2

Take a look at this:

var arr1 = [
  {
    id: 1,
    name: "Sarah",
  },
  {
    id: 2,
    name: "Michael",
  },
];

var arr2 = [
  {
    country: "US",
    details: [
      {
        mode: "full-time",
        members: [
          {
            id: 1,
          },
          {
            id: 2,
          },
        ],
      },
    ],
  },
];

function getPeopleByCountry(teamArr, countriesArr) {
  // map each country object in the array to a new country
  return countriesArr.map((country) => {
    return {
      ...country, 
      // modify country.details by mapping it to a new object
      details: country.details.map((detail) => {
        return {
          ...detail, 
          // modifying members
          members: detail.members.map((member) => {
            const memberObj = { ...member };
            // check if name exists for this member
            const name = teamArr.find((i) => i.id === member.id).name;
            if (name) {
              memberObj.name = name;
            }
            return memberObj;
          }),
        };
      }),
    };
  });
}

console.log(getPeopleByCountry(arr1, arr2));

A guide to checking an array of objects by their ID and assigning a new property using JavaScript

Answer №1

Similar questions

Implementing form validations using JavaScript for a form that is created dynamically

What is causing the duplication of leaves when using this DFS implementation?

ApolloError: Undefined fragment detected and unable to be used

Organizing a collection of string dictionaries in Swift

express/node: You are unable to define headers once they have already been sent to the client

Update search results when performing a new search on a web application (without using jQuery)

What could be causing my YAML value to be undefined when I try to read it in JavaScript, despite it being defined in every other

What is the best method for removing table rows with a specific class?

The functionality of the AngularJS nested router is not functioning properly

Is it possible to declare an array with a non-constant length?

What could be the reason for the lack of rendering in this imported React component using System.import?

Exploring the Observable object within Angular

Error encountered due to an unset offset on an array that was previously displayed?

Performing addition and subtraction calculations with HTML and Javascript

A different approach to splitting strings

Another method to verify an input using HTML5 regex and JavaScript

React's setState method may not trigger a re-render

Vue Router generates a URL containing %2F when dealing with slug routes

You cannot reassign NodeJS global variables

Implementing a post request triggered by a button click in Node.js with Express