1

I'm pretty new to development in general, but I'm trying to implement an LWC (accordian) that pulls the label from 2 different fields within our SFDC. The issue that I'm having is that when I click on the "open all" or "collapse all", the labels on the accordian get set back undefined. I'm pretty sure I didn't follow the best practice here, but any feedback would be greatly appreciated!

I have the following (took out some details, but please let me know if this is unclear)

JS File

@track activeSections = [];
@track openSectionList = '';
@track comment = []
@wire(getCommentData, {recordId : '$recordId' })
    comments({error, data}) {
        if (data) {
            this.comment = data;
            this.error = undefined;
        } else {
            this.comment = undefined;
            this.error = error;
        }
    }
// iterate through arrays
    get labelValue(){
        this.showData1 = this.objectData.map(objectData => objectData.data1);
        this.showData2 = this.objectData.map(objectData => objectData.data2);
            this.label = (this.data1[i] + ' ' + this.data2[i]);
            i += 1;
        return this.label;
    }
    // toggle button
    handleSectionToggle(event) {
        this.openSectionList = event.detail.openSections.join(', ');
    }
    // expand all
    handleOpenAll(event) {
        this.activeSections = this.comment.map(comment => comment.data);
    }
    // collapse all
    handleCollapseAll(event) {
        this.activeSections = [];
    }
    
};

HTML

<template>
    <template if:true={data}>
    <lightning-accordion
        allow-multiple-sections-open
        onsectiontoggle={handleSectionToggle}
        active-section-name={activeSections}>
        <div>
            <lightning-button onclick={handleOpenAll} label="Open All" title="openAll"></lightning-button>
            <lightning-button onclick={handleCollapseAll} label="Collapse All" title="collapseAll"></lightning-button>
        </div>
            <template if:true={data}>
                <template for:each={data} for:item="item" for:index="i">
                    <lightning-accordion-section name={item.data} label={labelValue} key={data.data} class="accordian-class">
                        <p key={data.data}> {item.data} 
                    </lightning-accordion-section>
                    </template>
            </template>
    </lightning-accordion>
</template>
</template>
2
  • not clear how you are populating this.comment or it's json structure assuming it is an array of objects
    – glls
    Jul 23 at 18:48
  • Hi @glls, sorry about that, updated the code. I'm getting "comments" through the wire method and then checking if there's a response. If so I'm then assigning it to comment
    – user21
    Jul 23 at 19:20
0

It all centers around the getLabelValue method.

A getter can't render different values for in a list.

Also, you have made a sort of map function that mixed into a standard for loop.

It's also not clear where you are putting data - it looks like you are adding it to the comment var, but you seem to still be trying to iterate data despite it not being stored anywhere.

Because you need a different label value for each element in your accordian, you need to add it to the data that you are iterating on.

Finally, since data is immutable, you need to change it to a mutable array so you can write your label information to it.

  • Change your iterator in the template to iterate on comment.
  • In the wire handler, assign data like this: this.comment = Object.assign([],data);
  • Write your label to this array in a loop.
this.comment.forEach( c-> {
  c.label = (c.SomeValue + ' ' + c.SomeOtherValue);
});

You can do this just after assigning this.comment;

If you run into any problems, assign to a temporary array and iterate on that, finally assigning it to the comment array when done.

Finally, if comment is a list, you should call it comments

2
  • This led me the right way, thank you! Sorry about my messy code, really a novice here. Thanks for spending the time to walk me through this one.
    – user21
    Jul 23 at 22:15
  • No probs - I wasn't really able to provide the exact answer, but I'm glad that I could help a little. Jul 24 at 1:43

Not the answer you're looking for? Browse other questions tagged or ask your own question.