Replace data of an array with the data from another array

Question

I have an array

    const data = [
    {
      id: 0,
      identifier: 'free-2020',
      name: '<I18nText id="pricing.plans.name.free" />',
      planTitle: 'free',
      price: '00',
      freeSearches: '<I18nText id="pricing.plans.features.unlimited" />',
      freeBookings: '<I18nText id="pricing.plans.features.unlimited" />',
      travelerProfiles: '<I18nText id="pricing.plans.features.unlimited" />',
      supportTickets: '<I18nText id="pricing.plans.features.available" />',
      supportByPhone: ' - ',
      supplierChannels: ' - ',
      customDomain: ' - ',
      active: true,
    },
    {
      id: 1,
      identifier: 'basic-2020',
      name: '<I18nText id="pricing.plans.name.basic" />',
      planTitle: 'basic',
      price: '29',
      freeSearches: '<I18nText id="pricing.plans.features.unlimited" />',
      freeBookings: '<I18nText id="pricing.plans.features.unlimited" />',
      travelerProfiles: '<I18nText id="pricing.plans.features.unlimited" />',
      supportTickets: '<I18nText id="pricing.plans.features.available" />',
      supportByPhone: ' - ',
      supplierChannels: ' 1 ',
      customDomain: ' - ',
      active: false,
    },
    {
      id: 2,
      identifier: 'standard-2020',
      name: '<I18nText id="pricing.plans.name.standard" />',
      planTitle: 'standard',
      price: '59',
      freeSearches: '<I18nText id="pricing.plans.features.unlimited" />',
      freeBookings: '<I18nText id="pricing.plans.features.unlimited" />',
      travelerProfiles: '<I18nText id="pricing.plans.features.unlimited" />',
      supportTickets: '<I18nText id="pricing.plans.features.available" />',
      supportByPhone: ' 1hr/mo ',
      supplierChannels: ' 2 ',
      customDomain: ' - ',
      active: false,
    },
    {
      id: 3,
      identifier: 'professional-2020',
      name: '<I18nText id="pricing.plans.name.professional" />',
      planTitle: 'professional',
      price: '99',
      freeSearches: '<I18nText id="pricing.plans.features.unlimited" />',
      freeBookings: '<I18nText id="pricing.plans.features.unlimited" />',
      travelerProfiles: '<I18nText id="pricing.plans.features.unlimited" />',
      supportTickets: '<I18nText id="pricing.plans.features.available" />',
      supportByPhone: ' 3hr/mo ',
      supplierChannels: ' 5 ',
      customDomain: 'Yes',
      active: false,
    },
    {
      id: 4,
      identifier: 'custom-2020',
      name: '<I18nText id="pricing.plans.name.custom" />',
      planTitle: 'custom',
      price: ' - ',
      freeSearches: '<I18nText id="pricing.plans.features.unlimited" />',
      freeBookings: '<I18nText id="pricing.plans.features.unlimited" />',
      travelerProfiles: '<I18nText id="pricing.plans.features.unlimited" />',
      supportTickets: '<I18nText id="pricing.plans.features.available" />',
      supportByPhone: '<I18nText id="pricing.plans.features.unlimited" />',
      supplierChannels: '<I18nText id="pricing.plans.features.unlimited" />',
      customDomain: '<I18nText id="pricing.plans.features.available" />',
      active: false,
    },
  ];

and another array

const plans = [
{id: 2, identifier: "professional-2020", name: "professional", currencyCode: "usd", price: "99.0"},
{id: 3, identifier: "free-2020", name: "free", currencyCode: "usd", price: "0.0"},
{id: 4, identifier: "basic-2020", name: "basic", currencyCode: "usd", price: "29.0"},
{id: 5, identifier: "standard-2020", name: "standard", currencyCode: "usd", price: "59.0"},
{id: 6, identifier: "custom-2020", name: "custom", currencyCode: "usd", price: "999.0"},
]

Now I want to put the data from the plans array to data array by matching the identifier key. So the id , identifier , name , price data of the data array will be replaced by the values of these keys of the plans array. Seems like I need to map these data from the two arrays to another array? or maybe not. How can I implement this functions. Need code examples.

Answer 1

data = data.map(d => {
  const correspondingPlan = plans.find(plan => d.identifier === plan.identifier);
  if (correspondingPlan) {
    return {...d, ...correspondingPlan};
  } else {
    return d
  }
})

Edit: Array.prototype.find is not supported in IE. Here's a solution with filter:

data = data.map(d => {
  const correspondingPlan = plans.filter(plan => d.identifier === plan.identifier)[0];
  if (correspondingPlan) {
    return {...d, ...correspondingPlan};
  } else {
    return d
  }
})

Answer 2

const plansById = {}; plans.forEach((plan) => { plansById[plan.identifier] = plan; }); data.forEach((line) => { line.plan = plansById[line.planTitle]; // You should probably add some null-check in case of a missing or wrong planTitle });

Answer 3

you can reduce to generate the expected results.

data.reduce((acc, curr) => {
    const found = plans.find(p => p.identifier === curr.identifier)
    if(found) {
        return [...acc, {...curr, ...found}];
    } else {
        return [...acc, { ...curr }]
    }
    return acc;
}, [])