Passing List<WrapperClass> as a parameter from Visualforce to Lightning and to iterate over the List<WrapperClass>

Question

This is my VF code, which runs on onclick

<script>
function func(data)
{ 
     $Lightning.use("c:testingFromVFtoLightningApp", function(){
     $Lightning.createComponent("c:testingFromVFtoLightning",
     {listoFRecords:'{!duplicateRecords}'},
     "lightning",
     function(){});
     });
}

Whereas duplicateRecords is of type List<DuplicateRecordsWrapper>

When i click on the button above code runs & successfully sent the data to Lightning Component. Here the problem is i could not able to Iterate over the wrapper class which is being sent from VF page (tried too many ways), But i had done so many times iterating over the wrapper classes as a response coming from AuraEnabledmethods. Why the both are different from each other. Please find the below screenshot which display {!v.listoFRecords} response.

Lightning.cmp

<aura:component >
<aura:attribute access="public" name="listoFRecords" type="leadConvertController.DuplicateRecordsWrapper[]"/>
<div class="slds-card__body">
    <aura:if isTrue="{!!empty(v.listoFRecords)}">
        {!v.listoFRecords}<br/>
        {!v.listoFRecords[0].DuplicateRecordsWrapper}
        <table class=" slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal slds-table_col-bordered" role="grid">
        <thead>
            <tr class="headercolour cGeneric_Table_Component" scope="row">
                <th class="slds-is-resizable slds-table_resizable-cols headerCell" scope="col" >Account Name</th>

            </tr>
        </thead>
        <tbody>
            <aura:iteration var="suc" items="{!v.listoFRecords}">
                <tr class="slds-hint-parent">
                    <td role="gridcell" >
                        <div class="slds-truncate dataCell" >{!suc.accountName}</div>
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
        </table>
    </aura:if>
</div>
</aura:component>

Edited:

[DuplicateRecordsWrapper:[accountId=001K000001SzRcBIAV, accountName=qweryhtj, city=Banglore, country=India, criteriaBasedOn=Duplicate Match, matchConfidence=51.0, message=Fuzzy Match, selectedRecord=false, state=Karnataka, street=S sankalp apartment,Neeladri Nagar, zipCode=560100], DuplicateRecordsWrapper:[accountId=001K000001SzRoCIAV, accountName=qweryhtj, city=Banglore, country=India, criteriaBasedOn=Duplicate Match, matchConfidence=51.0, message=Fuzzy Match, selectedRecord=false, state=Karnataka, street=S sankalp apartment,Neeladri Nagar, zipCode=560100], DuplicateRecordsWrapper:[accountId=001K000001SzRraIAF, accountName=qweryhtj, city=Banglore, country=India, criteriaBasedOn=Duplicate Match, matchConfidence=51.0, message=Fuzzy Match, selectedRecord=false, state=Karnataka, street=S sankalp apartment,Neeladri Nagar, zipCode=560100], DuplicateRecordsWrapper:[accountId=001K000001SzSKqIAN, accountName=qweryhtj, city=Banglore, country=India, criteriaBasedOn=Duplicate Match, matchConfidence=51.0, message=Fuzzy Match, selectedRecord=false, state=Karnataka, street=S sankalp apartment,Neeladri Nagar, zipCode=560100], DuplicateRecordsWrapper:[accountId=001K000001SzSPSIA3, accountName=qweryhtj, city=Banglore, country=India, criteriaBasedOn=Duplicate Match, matchConfidence=51.0, message=Fuzzy Match, selectedRecord=false, state=Karnataka, street=S sankalp apartment,Neeladri Nagar, zipCode=560100], DuplicateRecordsWrapper:[accountId=001K000001SzSUNIA3, accountName=qweryhtj, city=Banglore, country=India, criteriaBasedOn=Duplicate Match, matchConfidence=51.0, message=Fuzzy Match, selectedRecord=false, state=Karnataka, street=S sankalp apartment,Neeladri Nagar, zipCode=560100], DuplicateRecordsWrapper:[accountId=001K000001T26bIIAR, accountName=qweryhtj, city=Banglore, country=India, criteriaBasedOn=Duplicate Match, matchConfidence=51.0, message=Fuzzy Match, selectedRecord=false, state=Karnataka, street=S sankalp apartment,Neeladri Nagar, zipCode=560100], DuplicateRecordsWrapper:[accountId=001K000001T26egIAB, accountName=qweryhtj, city=Banglore, country=India, criteriaBasedOn=Duplicate Match, matchConfidence=51.0, message=Fuzzy Match, selectedRecord=false, state=Karnataka, street=S sankalp apartment,Neeladri Nagar, zipCode=560100], DuplicateRecordsWrapper:[accountId=001K000001T26elIAB, accountName=qweryhtj, city=Banglore, country=India, criteriaBasedOn=Duplicate Match, matchConfidence=51.0, message=Fuzzy Match, selectedRecord=false, state=Karnataka, street=S sankalp apartment,Neeladri Nagar, zipCode=560100], DuplicateRecordsWrapper:[accountId=001K000001T6nfoIAB, accountName=qweryhtj, city=Banglore, country=India, criteriaBasedOn=Duplicate Match, matchConfidence=51.0, message=Fuzzy Match, selectedRecord=false, state=Karnataka, street=S sankalp apartment,Neeladri Nagar, zipCode=560100]]

Wrapper Class Code

    public class DuplicateRecordsWrapper{
    public boolean selectedRecord{get;set;}
    public string matchConfidence{get;set;}
    public string criteriaBasedOn{get;set;}
    public string accountId{get;set;}
    @AuraEnabled
    public string accountName{get;set;}
    public string country{get;set;}
    public string street{get;set;}
    public string state{get;set;}
    public string city{get;set;}
    public string zipCode{get;set;}
    public string message{get;set;}
}

Answer 1

This was an interesting find.

To start with, avoid using inner class in your aura attribute declaration. While it may work, but it is documented as of today that it is unsupported and may not work (I actually got an error while saving my component using inner class as attribute type, which seems to be an issue when I looked up around).

Custom classes used for component attributes shouldn’t be inner classes or use inheritance. While these Apex language features might work in some situations, there are known issues, and their use is unsupported in all cases.

---

The Issue

The issue that you are not able to iterate over the expected list of results is because, you are not getting the values in your component as the expected aura attribute type, but you are getting that as a string. Because of this, your empty condition suffices, but because it's just a string, you never get to fetch the value of accountName. What you see in your VF page when you print that list of values is nothing but a string representation of the same.

---

The Resolution

You may like to review this based on your use case, but a way I got it working is described below.

Because you want the variable listoFRecords to be of type of Apex from where you can fetch values, the time you send the response from VF, send it as a JSON string rather than the list of Apex. So in your VF controller, where you are declaring and creating the duplicateRecords, you should have something as below:

public String duplicateRecords { get; private set; } // change to string
....
this.duplicateRecords = JSON.serialize(<the list of your wrapper records>); // serialize to JSON

There's no change in your VF itself.

Now, on your component, you will have something as below.

<aura:attribute access="public" name="listoFRecords" type="Object"/>
<aura:attribute access="public" name="jsonListoFRecords" type="Object"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
...
...
<aura:iteration var="myVar" items="{!v.jsonListoFRecords}">
    <tr>
        <td>
            {!myVar.accountName}
        </td>
    </tr>
</aura:iteration>

Notice few things here:

• I have used type Object to declare the variables because I am necessarily dealing with JSON message here instead of the Apex type itself
• Have used another variable to deserialize the contents those were sent from VF

Then, on the doInit function of your component, you deserialize the contents as below:

var fromVF = cmp.get("v.listoFRecords");
cmp.set("v.jsonListoFRecords", JSON.parse(fromVF));

In this scenario, you are not really dealing with your Apex class, but just with a JSON message.

Answer 2

I would suggest you add an initiation method in your Lightning Component and debug your input with a console.log('List of records', listoFRecords);.

Maybe for some reason it is passed as a String and not as a List. Then you'll have to explicitly parse it to a List.

Btw: why not simplified your aura:attribute with a type="LIST" instead of your wrapper class. In this case this is just a simple array.