I have the below array of objects named getRecommendations. I will be using this to map the data which i will be receiving from backend.

const getRecommendations = [
 { 
  recoTitle: "Retire",
  recoDescription: "Its time to retire and relax with family"
 },
 {
  recoTitle: "Buy home",
  recoDescription: "Start saving to buy home in near future"
 }
]

Below is the array of recommendations i receive from backend and it is in sequence of ranks. for e.g. Buy home is rank 1 and Retire is rank 2 in this case. sometimes it may be other way around. I want to display the recommendations in the same order as i receive from the backend to the UI display.

const recommendations = ["Buy home", "Retire"];

But i do the following mapping because i not only need recoTitle but also recoDescription to display the user. I have getRecommendations which does a mapping of recoTitle and recoDescription. The below code is used to get both in the array of object. It is as follows

const filteredReco = getRecommendations.filter(
  ({ recoTitle}) => recoDetails && recoDetails.indexOf(recoTitle) !== -1,
);

now, if i see the contents of filteredReco by using console log, Retire will come as a first object and then Buy Home. How can i ensure the order of listing is not affected by the way i use filter. Can someone please suggest.

Answer

recommendations.map(recName =>  
   getRecommendations.find(rec => rec.recoTitle === recName)
)