[SalesForce] How to iterate over result of imperative call to Apex method in LWC javascript file

I am calling an Apex method that returns me a list of sObject. I am making this call using the imperative method from withing the connectedCallback method of my LWC. I would like to iterate over the result from the imperative call since I am putting the individual fields into another array of child LWC component property. It says that result is not iterable. I also tried assigning it to a property and iterate over it but same problem.
Here is the code:
the Class and method

 public with sharing class ToDoManager {
        @AuraEnabled(cacheable=true)
        public static List<ToDoRecord__c> getToDoRecords(){

            return [SELECT toDoDateTime__c, toDoComplete__c, toDoText__c,toDoMoved__c FROM ToDoRecord__c WHERE toDoComplete__c=false];

        }
    }

The component code

import { LightningElement, track, wire } from 'lwc';
import { createRecord } from "lightning/uiRecordApi";
import getToDoRecords from '@salesforce/apex/ToDoManager.getToDoRecords';
import { refreshApex } from "@salesforce/apex";
export default class TodoReordList extends LightningElement {
    @track toDoText;
    @track today = new Date();
    @track date = this.today.getFullYear() + '-' + (this.today.getMonth() + 1) + '-' + this.today.getDate();
    @track time = this.today.getHours() + ":" + this.today.getMinutes() + ":" + this.today.getSeconds();
    @track dateTime = this.date + ' ' + this.time;
    //@wire(getToDoRecords) 
    //toDoRecords;
    //@track tempRecords=[];
    @track listOfTodos;
    @track error;
    @track todoItemList = [
        { itemDateTime: this.dateTime, itemComplete: false, itemText: 'Temporary Text' },
    ];

    onToDoTextChangeHandler(event) {
        this.toDoText = event.target.value;
    }

    onSubmitHandler() {
        const fields = { 'toDoDateTime__c': this.dateTime, 'toDoComplete__c': false, 'toDoText__c': this.toDoText, 'toDoMoved__c': false };
        const recordInput = { apiName: 'ToDoRecord__c', fields };
        createRecord(recordInput).then(response => {
            console.log('ToDO has been created : ', response.id);
        }).catch(error => {
            console.error('Error in creating ToDO : ', error.body.message);
        });
        this.todoItemList.push({ itemDateTime: this.dateTime, itemComplete: false, itemText: this.toDoText, itemMoved: false });
    }

    connectedCallback() {
        //refreshApex(this.toDoRecords);
        //var listOfRecords=this.toDoRecords.data;


        getToDoRecords().then(result=>{
            this.listOfTodos=result;
        })  
        .catch(error=>{
            this.error=error;
        })

        for(rec of this.listOfTodos){
            console.log("+++++++++++++++++++++++++"+rec.toDoText__c);
            this.todoItemList.push({itemDateTime:rec.toDoDateTime__c,itemComplete:rec.toDoComplete__c, itemText:rec.toDoText__c,itemMoved:rec.toDoMoved__c});
        }

    }
    renderedCallback(){

    }
}

Please help! Thanks in advance!

Best Answer

When you are making imperative apex call, You have to keep the for loop inside the promise.

     connectedCallback() {
        getToDoRecords().then(result=>{
            this.listOfTodos=result;
            for(rec of this.listOfTodos){
                 this.todoItemList.push({
                    itemDateTime:rec.toDoDateTime__c,
                    itemComplete:rec.toDoComplete__c,
                    itemText:rec.toDoText__c,
                    itemMoved:rec.toDoMoved__c});
            }
        }).catch(error=>{
            this.error=error;
        })
    }

In your code, For loop was getting executing before the promise gets resolve.

Related Topic