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.

Does this answer your question? Update the array with attributes from different array with same key for both - javascript — mappie
– mappie, Commented Sep 2, 2020 at 13:20
@SourabhSomani I want to replace some data of the data array with some data from the plans array. — ashfaqrafi
– ashfaqrafi, Commented Sep 2, 2020 at 13:23

Tur1ng · Accepted Answer · 2020-09-02 15:52:38Z

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
  }
})

edited Sep 2, 2020 at 15:52

answered Sep 2, 2020 at 13:30

Tur1ng

85310 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ashfaqrafi Over a year ago

array.find() is not supported in IE, could you please mention another way supported in IE, like array.filter()

ashfaqrafi Over a year ago

working version

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

Tur1ng Over a year ago

@ashfaqrafi I've updated my answer with your solution using filter

xurei · Accepted Answer · 2020-09-02 13:21:58Z

0

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
});

answered Sep 2, 2020 at 13:21

xurei

1,0868 silver badges23 bronze badges

Comments

Hamza Zaidi · Accepted Answer · 2020-09-02 14:49:33Z

0

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;
}, [])

answered Sep 2, 2020 at 14:49

Hamza Zaidi

6725 silver badges9 bronze badges

Collectives™ on Stack Overflow

Replace data of an array with the data from another array

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related