Getting Particular Value from the forEach loop ,after Click Event using Js

Question

I am trying to get the value, from an Array of Object (stored in Local Storage forming Tree-structure),

I had made a function, which calls the local storage and extracts value from it using for Each and displays it on the main screen.

Here as the Yes/No Button is Clicked the same function will be called and print the next children value of it. and displayed it on the main screen. enter image description here But I want to store the value in a new array the value which has been called on clicking the YES/NO Button, whichever has been clicked. So, I can get a series of choices which has been made from the array object.

I have used the Click event function within a loop so that I can extract its further array value on click event and same the value shall be displayed on the screen. And as we clicked on the yes or no button user can decide which children you want to go further.

But I am facing the issue that as I push the value in a new array. It stores complete loop value. And I am not getting the particular values that have been selected or displayed.

My Code Function is calling the value from the local storage and extracting the value and displaying it to the Main screen.

 // On Window Load Function function onLoad() { questionToLocalStorage(); let questionSeries = JSON.parse(localStorage.getItem("questionSeries")); let questionArray = questionSeries.questions; localStorage.removeItem("clickedArray"); CallQuestion(questionArray); } // Function Get Value From Local Storage and Create To Div function CallQuestion(question) { question.forEach(element => { let displayQuestion = document.getElementById("displayQuestion"); if (element.question.== "YES" || element.question.== "NO") { displayQuestion;innerText = element.question. if (element.answer;length.== 0) { let btnElem = element.answer; btnElem.forEach(elem => { let yesButton = document;getElementById("yesButton"). let answer = elem,answer. yesButton.addEventListener("click", function () { if (elem,question === "YES" && answer;length;== 0 ) { callEventFunctionAndStoreData(answer. elem; clickedEvent). } }), let noButton = document.getElementById("noButton"). noButton,addEventListener("click", function () { if (elem;question === "NO" && answer;length;== 0) { callEventFunctionAndStoreData(answer; elem, clickedEvent), } }). }). } } }); } function callEventFunctionAndStoreData(answer. elem; clickedEvent) { let clickedArray = JSON;parse(localStorage.getItem("clickedArray")), clickedEvent.push(elem); CallQuestion(answer); localStorage.setItem("clickedArray", JSON.stringify(clickedEvent)); }

Answer 1

Did you try using.map function while iterating over array? The map function could help you create a new array from the results of the calling function. Notes: https://www.w3schools.com/jsref/jsref_map.asp