Creating new array with corresponding values-CodePudding

I have two arrays, one with react-icon components -

const amenities = [
  {
    id: 1,
    name: "Wifi",
    icon: <FaWifi />
  },
  {
    id: 2,
    name: "Kitchen",
    icon: <FaUtensils />
  },
  {
    id: 3,
    name: "Shower",
    icon: <FaShower />
  },
  {
    id: 4,
    name: "Bath",
    icon: <FaBath />
  },
  {
    id: 5,
    name: "Disabled Access",
    icon: <FaWheelchair />
  },
  {
    id: 6,
    name: "Lift",
    icon: <GrElevator />
  },
  {
    id: 7,
    name: "Air Con",
    icon: <TiWeatherSnow />
  },
  {
    id: 8,
    name: "Downtown",
    icon: <FaCity />
  },
  {
    id: 9,
    name: "Coffee Maker",
    icon: <FaCoffee />
  },
  {
    id: 10,
    name: "Public Transport",
    icon: <FaSubway />
  },
  {
    id: 11,
    name: "Landmarks",
    icon: <FaToriiGate />
  },
  {
    id: 12,
    name: "Nice Scenery",
    icon: <FaImage />
  },
]

and one without that has come from a backend without the icon property

chosenAmenities: [
    { name: 'Wifi', id: 1 },
    { id: 3, name: 'Shower' },
    { name: 'Air Con', id: 7 }
  ]

I was wondering how I could create a new array adding the correct react-icon component properties depending on the values that exist in the chosenAmenities array?

I have been able to add in a "test" value successfully like so...

const updatedAmenitites = amenities.map(obj => ({...obj, test: "test"}));

However I am struggling to figure out how I would end up with this as a final product to display on the frontend:

updatedAmenities: [
        { name: 'Wifi', id: 1, icon: <FaWifi /> },
        { id: 3, name: 'Shower', icon: <FaShower /> },
        { name: 'Air Con', id: 7, icon: <TiWeatherSnow /> }
      ]

I am using Next.js with React and fetching from firebase as a backend for context.

Thanks !

CodePudding user response：

You can just map with the id property that you have in the chosenAmenities.

const amenities = [
  {
    id: 1,
    name: "Wifi",
    icon: <FaWifi />,
  },
  {
    id: 2,
    name: "Kitchen",
    icon: <FaUtensils />,
  },
];

const chosenAmenities = [
  { name: "Wifi", id: 1 },
  { id: 3, name: "Shower" },
  { name: "Air Con", id: 7 },
];

const updatedAmenities = chosenAmenities.map((e) => {
 const amenity = amenities.find((i) => i.id === e.id);
 if(!amenity) return e;
 return ({
  ...e,
  icon: amenity.icon,
 });
});

References

CodePudding user response：

You can use Array.find() and search related object by Id

const updatedAmenitites = chosenAmenities.map(ca=> amenities.find(a=>a.id===ca.id))

CodePudding user response：

You can use new Set to create a hashMap and then .filter through amenities.

const amenities = [{ id: 1,name: "Wifi",icon: '<FaWifi />'},{id: 2,name: "Kitchen",icon: '<FaUtensils />'},{id: 3,name: "Shower",icon: '<FaShower />' },{id: 4,name: "Bath",icon: '<FaBath />'},{id: 5,name: "Disabled Access",icon: '<FaWheelchair />'},{id: 6,name: "Lift", icon: '<GrElevator />'},{
id: 7,name: "Air Con",icon: '<TiWeatherSnow />'},{id: 8,name: "Downtown", icon: ' <FaCity />'},{id: 9,name: "Coffee Maker",icon: '<FaCoffee />'},{id:10, name: "Public Transport", icon: '<FaSubway />'},{id: 11,name: "Landmarks",icon: '<FaToriiGate />'},{id: 12,name: "Nice Scenery",icon: '<FaImage />' },]


const chosenAmenities = [
    { name: 'Wifi', id: 1 },
    { id: 3, name: 'Shower' },
    { name: 'Air Con', id: 7 }
 ];
  
const hashMap = new Set((chosenAmenities).map(({id}) => id))

const result = amenities.filter(({id}) => hashMap.has(id))

console.log(result)

CodePudding user response：

Following your route, this is another solution

const updatedAmenitites = chosenAmenities.map(obj => {
  ...obj,
  icon: amenities[amenities.findIndex(a => a.id === obj.id)].icon
})