CODEWITHSUNDEEP
angular
Sonny Hansen
Sonny Hansen

Reputation: 630

Show specific item from array in HTML

I'm trying to show specific item depending on another value.

i have Dispensers array looking like:

{deviceID: 37, rack: 2, arm: 5, plu1: "4", plu2: "7"},
{deviceID: 38, rack: 2, arm: 6, plu1: "5", plu2: "8"},
{deviceID: 39, rack: 2, arm: 7, plu1: "6", plu2: "9"}

then when showing this data i want to show the PLU from my products table instead of the number

{pluNo:1, pluName:"Cola"},
{pluNo:4, pluName:"Sprite"},
{pluNo:5, pluName:"item3"},
{pluNo:6, pluName:"item3"},
{pluNo:7, pluName:"itemName"},
{pluNo:8, pluName:"itemName"},
{pluNo:9, pluName:"itemName"}

So i want to be able to print my dispensers but instead of showing the PLU number i would like to show the name, as it gives more sense.

printing out like this:

<tr *ngFor="let item of dispensers; let i = index">                                                                                                                                                                     
    <td>                                                                                        
        {{item.rack}}                                                                                   
    </td>                                                                                   
    <td>                                                                                        
        {{item.arm}}                                                                                    
    </td>                                                                                   
    <td>                                                                                        
        {{item.plu1}}   //Want to show products.pluName with pluNo = item.plu1                                                                                                                                                                  
    </td>                                                                                                                       
    <td>                                                                                        
        {{item.plu2}}   //Want to show products.pluName with pluNo = item.plu2                                                                                  
    </td>                                                                                                                                                                                                   
</tr>

tried:

{{products | filter : {'pluNo':item.plu1} }} //dont run
{{products[item.plu2].pluName}} // gives me pluName but by index instead of by pluNo

Upvotes: 0

Views: 74

Answers (2)

Daniel B
Daniel B

Reputation: 8879

You can create a function that returns the product based on the PLU-code, something like 

getProductByPlu(id: string) {
    return this.products.find((p) => p.pluNo.toString() === id);
}

and in your template call it with {{getProductByPlu(item.plu2).pluName}}.

Working example here.

Upvotes: 1

Vivek Doshi
Vivek Doshi

Reputation: 58613

Better way to do

Component Side :

products = [{ pluNo: 1, pluName: "Cola" },
  { pluNo: 4, pluName: "Sprite" },
  { pluNo: 5, pluName: "item3" },
  { pluNo: 6, pluName: "item3" },
  { pluNo: 7, pluName: "itemName" },
  { pluNo: 8, pluName: "itemName" },
  { pluNo: 9, pluName: "itemName" }];

productsId = {};

constructor(){
    this.products.forEach(product => {
        this.productsId[product.pluNo] = product.pluName;
    })
}

Template Side :

<tr *ngFor="let item of dispensers; let i = index">
    {{ productsId[item.plu1] }}
    {{ productsId[item.plu2] }}
</tr>

WORKING DEMO

Reason of being better is :

As per @DanielB's solutions , from template side it will call the function each time loops , and each time loops inside the function also , so it will loops almost (no_of_records * no_of_records)

getProductByPlu(id: string) {
    return this.products.find((p) => p.pluNo.toString() === id);
}

{{getPluName(item.plu2).pluName}}

Upvotes: 1

Related Questions