Unable to display LWC component in Lightning record page

lightning-web-componentslwc-domlwc-wire-adapter

I am not able to see the ProgreesIndicator with the custom names that I retrieved from apex method

Please help me!!

HTML:

<template>
    <lightning-card>
        <lightning-progress-indicator current-step="1" type="path" variant="base">
            <template for:each={steps} for:item="step">
                <lightning-progress-step label={step.label} value={step.value} key={step.label}></lightning-progress-step>
            </template>
        </lightning-progress-indicator>
    </lightning-card>
</template>

JS:

import { LightningElement, wire, track } from 'lwc';
import getProcessNodesList from '@salesforce/apex/ProcessNodesController.getPNodes';

export default class DisplayProcessNodes extends LightningElement {
    steps=[];
    
    error;   

    @wire(getProcessNodesList)
    wiredProcessNodes({ error, data }) {
            if (data) 
            {   
                var count = 1; 
                data.forEach(element => {
                    this.steps.push({label: element.Name, value: count.toString()});
                    count++;
                });
                console.log(this.steps); 
                this.error = undefined;
            } else if (error) {
                this.error = error;
                this.steps = undefined;
            }
    }
    
    
}

Best Answer

Because you didn't @track steps, and you're using Array.prototype.push on it, LWC doesn't know that it needs to do a render cycle. I recommend avoiding using this design, as you can simply write:

this.steps = data.map((v,i) => ({ label: v.Name, value: `${i+1}`}));

Where Array.prototype.map iterates over each value, performs the transformation as per the callback handler (here, we transform to { label, value }), and then returns a new Array. When a variable is updated to an entirely new Object, this automatically triggers a render cycle.

Related Topic