How to process <String, customwrapper class> in LWC js file

Question

I have the below apex method returning the below Map

@AuraEnabled(cacheable=true)
public static Map<String, AccountDtls> getActiveLstng(Id accountId ){
<<code returning the map>>
}

The above method returns the Account details and List of Opportunity lineitems of all the Child accounts in the form of wrapper class for the passed Parent account id

Below is the structure of wrapper class:

Class AccountDtls {
    public String accName { set; get; }
    public String cpoMake { set; get; }
    public List<OpportunityLineItem> olis { set; get; }

    public AccountDtls(String accName, String cpoMake, List<OpportunityLineItem> olis) {
        this.accName = accName;
        this.cpoMake = cpoMake;
        this.olis = olis;
    }
}

In my LWC component:

Goal is to form the html content in the attached image from js based on the Map returned from wire apex and pass it as the value for lightning-input-rich-text element

Problems:

1. How do read the wrapper value (AccountDtls) based on Account id (key) in JS. console.log JSON.stringify(result[key]) is printing [object Object]
2. I want to read the wrapper value (AccountDtls) based on Account id (key) and then read the List property within JS

can anyone suggest how can I do this within JS?

wireAccnts({data,error}){
    if(data){
        console.log('Inside data==>', data);
        var result = data; //Map<String, AccountDtls>

        for(var key in result){
            console.log('Inside key==>'+ key)
            if (result.hasOwnProperty(key)){
                console.log('Inside result[key] ==>'+ JSON.stringify(result[key]))
                //this.mapOfAcctDlts.push({key: key, value : result[key] })  
            }

            }
        }

Answer 1

I see that in your wrapper you are not adding @AuraEnabled over the parameters -

public class AccountDtls {
            @AuraEnabled
            public String accName {  get; set;}
            @AuraEnabled
            public String cpoMake {  get; set; }
            @AuraEnabled
            public List<OpportunityLineItem> olis { get; set;  }

            public AccountDtls(String accName, String cpoMake, List<OpportunityLineItem> olis) {
                this.accName = accName;
                this.cpoMake = cpoMake;
                this.olis = olis;
            }
        }

Another way around this is to replace the return from Map to String -

 @AuraEnabled(cacheable=true)
        public static String getAccountsAndItsOppties(){
            List<Opportunity> oppties = [SELECT Id, Name, AccountId, Account.Name ,(select Id, OpportunityId from opportunitylineitems where OpportunityId!='') FROM Opportunity WHERE AccountId!=null];
            Map<String, AccountDtls> oppAndAccount = new Map<String,AccountDtls>();
            for(Opportunity Opp : oppties){
                if(opp.opportunitylineitems.size()>0 && opp.AccountId!=null){
                    AccountDtls adt =  new AccountDtls(opp.Account.Name,'make', opp.opportunitylineitems);
               
                    oppAndAccount.put(opp.AccountId,adt);
                }
            }
          
            return JSON.serialize(oppAndAccount);
        }

you will get the response after parsing

JSON.parse(data);

Answer 2

Thank you all for your valuable feedback. the above JSON parsing did the trick and it worked..I am able to see the results as expected. But one thing weird though, while looping through Line items array for each account, when I print item.Produt2.name or item.Product_Name_text__c ,it is printing as undefined in console.log, even though I can see the data for these 2 fields when I print the result (returned from apex wire).

    var result =  JSON.parse(data);
    for(var key in result){
      if (result.hasOwnProperty(key)){
        result[key].olis.forEach(item=> {
        console.log('Inside olis loop:item.Product_Name_text__c=>'+ item.Product_Name_text__c) //undefined
        console.log('Inside olis loop:item.Product2.name=>'+ item.Product2.name) //undefined    
        });
      }

 }
 

result returned from wire apex:

"olis": [
      {
        "attributes": {
          "type": "OpportunityLineItem",
          "url": "/services/data/v57.0/sobjects/OpportunityLineItem/00ke000000B8ALRAA3"
        },
        "Id": "00ke000000B8ALRAA3",
    "Product_Name_Text__c": "Testing",
         "Product2": {
           "attributes": {
             "type": "Product2",
             "url": "/services/data/v57.0/sobjects/Product2/01te0000004mCOOAA2"
           },
           "Name": "Testing",
           "Id": "01te0000004mCOOAA2"
        },