Skip to main content
Topics#Lightning ExperienceAkansha Deepak's Question
Akansha Deepak (Lirik Inc) asked in #Lightning Experience
Jun 17, 2021, 1:58 PM

map is Not working in LWC Component

JAVASCRIPT :

import { LightningElement ,track,wire} from 'lwc';

import getAccountList from '@salesforce/apex/AccountContact.getAccountList';

export default class AccountAndContact extends LightningElement {

@track accounts;

@track error;

@wire(getAccountList)

wiredAccounts({error,data}){

if (data) {

this.accounts = data;

} else if (error) {

this.error = error;

}

}

downloadCSVFile() {  

let listOfAccountsFields = ['Id','Name','Type' ,'Rating' ,'Ownership' , 'Active__c'];

let listOfContactsFields = ['Id','LastName']; 

let rowEnd = '\n';

let listOfContact = [];

this.accounts.forEach(element => {

listOfContact.push(element.Contacts);

});

//console.log('contacts' +JSON.stringify(listOfContact));

let mapOfString = new Map();

listOfContact.forEach(element => {

    let text = listOfContactsFields.join(',')+'\n';

element.forEach(eachElement=>{

    listOfContactsFields.forEach(field =>{

        //console.log('checkfield' +JSON.stringify(field))

        text += '\"'+eachElement[field]+'\"';

        }); 

       });

       text += '\n';

       

       if(mapOfString.has(element.AccountId)){

           mapOfString.set(element.AccountId,mapOfString.get(element.AccountId)+text);

           } 

       else{

           let tempStr = text;

           mapOfString.set(element.AccountId,tempStr);

           }

    //console.log('text' +text);

    

});

const arr = Array.from(mapOfString);

console.log('elementmap-----------' +arr);

let rowData = new Set();

    rowData = Array.from(rowData);

    csvString += listOfAccountsFields.join(',') +rowEnd;

    this.accounts.forEach(element=>{

    listOfAccountsFields.forEach(field=> {

        csvString += '"'+element[field]+'",'

    });

    csvString += '\n';

    csvString += mapOfString.get(element.Id);

})  

console.log('csv----------' +csvString);

let downloadElement = document.createElement('a');

// This  encodeURI encodes special characters, except: , / ? : @ & = + $ ⌗ (Use encodeURIComponent() to encode these characters).

downloadElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvString);

downloadElement.target = '_self';

// CSV File Name

downloadElement.download = 'Account Data.csv';

// below statement is required if you are using firefox browser

document.body.appendChild(downloadElement);

// click() Javascript function to download CSV file

downloadElement.click();

document.body.removeChild(downloadElement); 

//console.log(csvString);

}

}

HTML:

<template>

<div class="slds-box slds-theme_default">

    <div class="slds-p-around_medium lgc-bg-inverse">

        <p>Download data as a CSV &nbsp;

            <lightning-button icon-name="utility:download" 

                                label="Download as CSV" 

                                title="Download CSV File"

                                onclick={downloadCSVFile} variant="brand"></lightning-button>

        </p>

    </div>

    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">

        <thead>

            <tr>

                <th class="" scope="col">

                    <div class="slds-truncate" title="Account Name">Name</div>

                </th>

                <th class="" scope="col">

                    <div class="slds-truncate" title="Type">Type</div>

                </th>

                <th class="" scope="col">

                    <div class="slds-truncate" title="Rating">Rating</div>

                </th>

                <th class="" scope="col">

                    <div class="slds-truncate" title="Ownership">Ownership</div>

                </th>

                <th class="" scope="col">

                    <div class="slds-truncate" title="Active">Active</div>

                </th>

            </tr>

        </thead>

        <tbody>

            <template for:each={accounts} for:item="acc">

                <tr key={acc.Id}>

                    <td>{acc.Name}</td>

                    <td>{acc.Type}</td>

                    <td>{acc.Rating}</td>

                    <td>{acc.Ownership}</td>

                    <td>{acc.Active__c}</td>

                </tr>

                <tr key={acc.Id}>

                    <th class="" scope="col">

                        <div class="slds-truncate" title=""></div>

                    </th>

                    <th class="" scope="col">

                        <div class="slds-truncate" title="Contact Id">Contact Id</div>

                    </th>

                    <th class="" scope="col">

                        <div class="slds-truncate" title="LastName">LastName</div>

                    </th>

                </tr>

                <template if:true={accounts}>

                    <template for:each={acc.Contacts} for:item="con">

                        <tr key={con.Id}>

                            <td></td>

                            <td>{con.Id}</td>

                            <td>{con.LastName}</td>

                        </tr>

                    </template>

                </template>

            </template> 

        </tbody>

    </table>

</div>   

</template>

CLASS :

public with sharing class AccountContact {

    @AuraEnabled(cacheable=true)

    public static List<Account> getAccountList() {

        List<Account> acct= [SELECT Name,Type ,Rating ,Ownership , Active__c,(SELECT Id,LastName,AccountId FROM Contacts)

        FROM Account WHERE Name LIKE'Account%' LIMIT 10];

        return acct;

    }

}

 
1 answer
Write an answer...
0/9000