CODEWITHSUNDEEP
node.jsangularjsangulartypescript
AAaaAA
AAaaAA

Reputation: 85

how to display object based on matching object id with the id coming from the server

I have an array of objects like this :

in FruitModel.ts

export interface ColorByFruit{  
    Id : number;
    name : string;
    color : string;
}  
  const Fruits: ColorByFruit[] = [  
     {Id:1, name:"Apple", color:"red"},
     {Id:2, name:"Banana", color:"yellow"}, 
     {Id:3, name:"Peach", color:"Orange"},
     {Id:4, name:"Pineapple", color:"Brown"},
     {Id:5, name:"Blueberry", color:"blue"}, 
];

in the class.ts I import the interface into the class

then I get data from the server which includes an ID, I want to match the ID ith the colorFruit Id so I can display the name of the fruit and the color.

how do I do that ?

Upvotes: 0

Views: 264

Answers (1)

FolabiAhn
FolabiAhn

Reputation: 526

To display the name and color you just have to use the map operator.

Suppose your list of fruits coming from the server are set in a variable : ServerFruits

const nameAndColors = ServerFruits.filter(x => Fruits.map(y => y.Id).includes(x.Id)).map(({Id, name}) => ({Id, name})); 

console.log(nameAndColors );

Upvotes: 1

Related Questions