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 usingArray.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: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.