1

I'm trying to use wrapper of wrapper in my lwc but while accessing the wrapper attribute, its not displaying any value.

I checked in my controller before the return statement and it is returning data. May be I'm not accessing the wrapper attribute properly.

Also, I'm not able to iterate the list variable of wrapper class.

Inner Wrapper:

public class InnerWrapper {
    @AuraEnabled
    public Integer serialNumber{get;set;}
    @AuraEnabled
    public Obj1 Oppsc{get;set;}
    @AuraEnabled
    public String Response{get;set;}

    public InnerWrapper(Integer serialNumber,Obj1 Oppsc, String Response) {
        this.serialNumber = serialNumber;
        this.Oppsc = Oppsc;  
        this.Response = Response;
    }   
}

Outer Wrapper:

public class OuterWrapper {
    @AuraEnabled
    public Boolean up{get;set;}
    @AuraEnabled
    public Boolean down {get;set;}
    @AuraEnabled
    public Integer OpportunitySum{get;set;}
    @AuraEnabled
    public List<InnerWrapper> OpportunityList = new List<InnerWrapper>();

    public OuterWrapper(Boolean up, Boolean down,Integer BusinessCriteriaSum,
                           Integer OpportunitySum,List<InnerWrapper> OpportunityList){
                               this.up = up;
                               this.down = down;
                               this.OpportunitySum = OpportunitySum;
                               this.OpportunityList = OpportunityList;
                           }
}

LWC HTML:

<template>
<lightning-card title="LWC">
    <div>
            Status : {wrapper.up}
    </div>
    <div>
        <lightning-card title="Section 1">
            <table>
                <tr>
                    <th>Serial Number</th>
                    <th>Opportunity Name</th>
                    <th>Account Name</th>

                </tr>
                <template for:each={wrapper.OpportunityList} for:item="wrap">
                    <tr key={wrap.serialNumber}> 
                        <td>{wrap.Oppsc.Name}</td>
                        <td>{wrap.Response}</td>

                    </tr>

                </template>
            </table>
        </lightning-card>
</lightning-card>
</template>

LWC JS:

import { LightningElement,api,wire } from 'lwc';
import getValue from '@salesforce/apex/ScController.getValue';

export default class ScScoreCard extends LightningElement {
    @api recordId;
    @wire(getValue, {opportunityId: '$recordId'}) wrapper;

    }       

    </div>   
</lightning-card>
</template>
2
  • What is the return value for ScController.getValue?
    – Jayant Das
    Apr 3, 2019 at 14:42
  • It return the OuterWrapper Apr 3, 2019 at 17:07

2 Answers 2

1

This is how you can access the List<InnerWrapper> attributes from the response received from your wired function, which based on your comments returns the OuterWrapper instance.

You will need to utilize a variable to store the list of your InnerWrapper class in the JS and then utilize that on your HTML.

So your JS will look like as:

// declare a variable for the inner list
innerOpportunityList;

@wire(getValue, {opportunityId: '$recordId'}) wrapper ({
    error,
    data
}) {
    if(data) { // data here is the OuterWrapper as received in the response
        this.innerOpportunityList = [];

        // now assign the OpportunityList to the member variable
        this.innerOpportunityList = data.OpportunityList;
    } else {
        this.error = error; 
    }
}

And then on the HTML, you access the values as:

<template for:each={innerOpportunityList } for:item="object">
    <p key={object.serialNumber}>{object.Response}</p>
</template>
1

If you use a generic @wire/property, the values appear in "data":

<template>
<lightning-card title="LWC">
    <div>
            Status : {wrapper.data.up}
    </div>
    <div>
        <lightning-card title="Section 1">
            <table>
                <tr>
                    <th>Serial Number</th>
                    <th>Opportunity Name</th>
                    <th>Account Name</th>

                </tr>
                <template for:each={wrapper.data.OpportunityList} for:item="wrap">
                    <tr key={wrap.serialNumber}> 
                        <td>{wrap.Oppsc.Name}</td>
                        <td>{wrap.Response}</td>

                    </tr>

                </template>
            </table>
        </lightning-card>
</lightning-card>
</template>

You'll need to remember this if you don't use the @wire/function version.

To fix your code without changing the template, you would do the opposite:

@track wrapper;
@track error;

@wire(getValue, { opportunityId: "$recordId" })
wrapperWire({ error, data }) {
  this.wrapper = data;
  this.error = error;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .