Problem to show String list in Show toast event

Question

Hello everybody I am working with a LWC form that gathers the information from the user and send it to an apex function that validates the data. If this data is incorrect it send the list of errors of why is the data wrong. And I want that this data to be shown in different show toast events. The problem is that I am getting this instead of the message:

in my apex function I have the next code:

@AuraEnabled(cacheable=true)
 public static List<ValidationError> getInfoFromLWC(String wrapperWithInfo){
 MyClassName newInstance = new MyClassName();
 WrapperInterface newWrapper = newInstance.createWrapper(wrapperWithInfo);
 List<QX_ValidationError> listaConErrores = newWrapper.validate();
    List<String> listaErrores = new List<String>();
    System.debug('start validating...');
    System.debug('validated...');
    System.debug('messages...'+ newWrapper.validate());
    if(listaConErrores.isEmpty()){
        return null;
    }else{
        for(QX_ValidationError iError: listaConErrores){
            listaErrores.add(String.valueOf(iError));
        }
        System.debug('lista de errores string...'+ listaErrores);
        return listaErrores;
    }

And in my .js I have the following code:

wrapperC101({wrapperWithInfo : JSON.stringify(this.createWrapper())}).then((result) =>{
        const{data,error} = result;
        this.data = result;
        console.log('data from apex function...'+ this.data);
        for (var iMessage in this.data){
            const notificationError = new ShowToastEvent({
                title: 'Error',
                message: iMessage,
                variant: 'error'
            });
            this.dispatchEvent(notificationError);
        }
        this.error = undefined;
    }).catch((error)=>{
        this.error = error;
        this.data = undefined;
    })

And the console log that shows me the data that comes from the apex function is the next one:

Could anybody help me to show the message error? Thanks

Answer 1

for...in loops over enumerable properties of an object. Since you're returning a List, in JS those properties are the index of array's element, that's why you see "1", "2", "3", etc...

You should use for...of to loop over the values of the array.
Please also prefer using const and let over var.
JS

wrapperC101({wrapperWithInfo : JSON.stringify(this.createWrapper())})
.then((result) =>{
    this.data = result;
    console.log('data from apex function...'+ this.data);
    for (const iMessage of this.data){
        const notificationError = new ShowToastEvent({
            title: 'Error',
            message: iMessage,
            variant: 'error'
        });
        this.dispatchEvent(notificationError);
    }
    this.error = undefined;
}).catch((error)=>{
    this.error = error;
    this.data = undefined;
})

By the way, the signature of the apex method is wrong: it doesn't return a list of ValidationError, it returns a list of string: listaErrores.
Moreover returning an empty list is a better approach over returning null. This way you skip a null check.
Since you're calling this method imperatively, it doesn't need cacheable=true.
Apex:

@AuraEnabled
public static List<String> getInfoFromLWC(String wrapperWithInfo){
    MyClassName newInstance = new MyClassName();
    WrapperInterface newWrapper = newInstance.createWrapper(wrapperWithInfo);
    List<QX_ValidationError> listaConErrores = newWrapper.validate();
    List<String> listaErrores = new List<String>();
    System.debug('start validating...');
    System.debug('validated...');
    System.debug('messages...'+ newWrapper.validate());
    // removed return null
    // the next line will throw no error if listaConErrores is empty
    for(QX_ValidationError iError: listaConErrores) {
        listaErrores.add(String.valueOf(iError));
    }
    System.debug('lista de errores string...'+ listaErrores);
    return listaErrores;
}