So I am facing this problem here,in short it goes like I have two templates which are conditionally displayed on click of Next and Previous

so it is essentially lightning combo-box component with three values which forms the first screen. Now on clicking the Next button opens up a template which shows certain questions based on the selected option from the previous template lightning combo-box options. example if the option is selected as "30 day Template" in the first modal box in the second template it will show as shown in the screenshot here,subsequent changes will appear for other options.Please not the Previous button also in this modal box where in clicking it will take us back to the previous page and we can toggle between the two.

Now the problem which is occurring is Whenever I am trying to select any other value from the lightning combo-box after the first time selection the second template is populating not only populating the equivalent mapped questions for the one selected in the drop-down,but also the ones which were previously selected.It is appending all the fields mapped for the selected drop-down list which are currently selected as well as previously selected. For example: if in the first modal box I had selected "30 day Template" which is mapped to lets say to 3 fields namely A,B and C which is displayed in the second modal box once I have click on the Next button.Now I decide to go back clicking previous and select a different option lets say 10 day template which is mapped to lets say 4 fields D,F,G and H and click on the next button,in the second modal box now it is displaying the fields mapped for the previously selected option i,e. A,B,C as well as the one currently selected D,F,G and H.

handleChange(event) {
let mySet = new Set();
console.log('in here in selection');
 const selectedTemplateNameDummy = event.detail.value;
console.log('selectedOptiondsds=' +selectedTemplateNameDummy);

    selectedTemplateName : selectedTemplateNameDummy
.then(result => {
    console.log('entered then');
    let data = JSON.parse(JSON.stringify(result));


    for(var key in data){
        this.mapData.push({value:data[key], key:key}); 
        console.log('value is'+data[key]);
         console.log('key is'+key);

.catch(error => {
    this.error = error;



The next and Previous functions are only for the toggling of the templates Please help in this regard and it is urgent.Do let me know if any question comes up.

1 Answer 1


I think you meant to map the data keys to a list:

this.mapData = Object.keys(data).map(key=>({ key, value: data[key] }));
  • you are next to GOD,thank you! <3
    – victor
    May 9, 2020 at 16:18
  • How ever,could you please explain where exactly did I go wrong and what made this fixed,so I understand the map values were persisting,Question 1)Why and 2)What made it unique
    – victor
    May 9, 2020 at 16:22
  • @victor your original code did not clear out the old array, but instead just added new values to it. The new revision creates a new array from scratch. I also shortened your code by avoiding the for loop.
    – sfdcfox
    May 9, 2020 at 21:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .