leveraging the localStorage feature in a for-in iteration

Question

leveraging the localStorage feature in a for-in iteration

I am new to stackOverflow, although I have browsed the forums for help in the past. However, this time I couldn't find a solution to my current issue, so I decided to create an account and seek assistance.

The problem at hand is related to a workout application that consists of 3 pages - page 1: where the user selects gym equipment (bike, rower or x trainer) and difficulty level, page 2: displays specific workouts based on the selections, and page 3: the actual workout to be completed.

My goal is to store certain data in a localStorage object depending on the link clicked by the user. But, each time a link is clicked, only the last value in the 'for in' loop gets stored, regardless of the link. Here's a simplified explanation:

PAGE 1: User selects equipment and difficulty from dropdown menus

// Constructor function to create workout instances
function Workout(name, desc, loc, work_rest, res, intensity){
    // ... properties defined here
}

// Create Workouts for bike
var bike = {
    easy: [
        {workout_1: new Workout('Tabata', 'This is a tabata style workout', '../Workout_page_example/index.html', [20, 10,...])},
        {workout_2: new Workout('Classic_HIIT', 'This is a HIIT session', '../Workout_page_example/index.html',[60,30,...])},
        {workout_3: new Workout('Clock_Face', 'Beat the clock', '../Workout_page_example/index.html',[120, 60...])}
    ],
    int:[],
    adv:[]
};

btn.addEventListener('click', function() {
    if(equipment.value === "bike"){
        if(difficulty.value === "easy"){
            localStorage.setItem('get_info', JSON.stringify(bike.easy));
        } else if(difficulty.value === "int"){
            localStorage.setItem('get_info', JSON.stringify(bike.int));
        } else if(difficulty.value === "adv"){
            localStorage.setItem('get_info', JSON.stringify(bike.adv));
        }
        location.href = 'workouts/index.html';
});

This above page is working fine. Now, moving on to Page 2 which displays all available workouts based on the user's previous selections:

PAGE 2: Display workouts based on equipment and difficulty selected

window.addEventListener('load', function(){
    var getInfo = JSON.parse(localStorage.getItem('get_info'));
    var dom = document.getElementById('section');

    for(var key in getInfo){
        var obj = getInfo[key];
        
        for(var prop in obj){
            // display workout details
            dom.innerHTML += "<hr/><div class='workout_title'><h1>"+obj[prop].name.replace('_',' ')+"</h1></div>";
            dom.innerHTML += "<div class='workout_desc'><h4>"+obj[prop].desc+"</h4></div>";

            // store data in localStorage
            localStorage.setItem('work_rest', JSON.stringify(obj[prop].work_rest));
            localStorage.setItem('resistance', JSON.stringify(obj[prop].res));
            localStorage.setItem('intensity', JSON.stringify(obj[prop].intensity));

            dom.innerHTML += "<div class='workout_link'><a href='"+ obj[prop].loc +"' id='"+obj[prop].name+"'>START >></a></div>";
        }

    }

})

On clicking the links, only the data for the 'Clock Face' instance is being stored in the localStorage object. I understand why this is happening but unsure how to fix it.

javascript object local-storage for-in-loop

Answer 1

Answer №1

There is a flaw in your current approach where you are cycling through the 3 workouts and saving them without giving the user a chance to choose a workout. This causes the stored workout data to be constantly overwritten in each iteration, resulting in only the final workout being saved in the array. This means that all previous workouts have been replaced, creating a chain of overwriting that leads to only one workout being stored effectively.

Answer 2

There is a flaw in your current approach where you are cycling through the 3 workouts and saving them without giving the user a chance to choose a workout. This causes the stored workout data to be constantly overwritten in each iteration, resulting in only the final workout being saved in the array. This means that all previous workouts have been replaced, creating a chain of overwriting that leads to only one workout being stored effectively.

Answer 3

Answer №2

I managed to solve the issue:

 window.addEventListener('load', function(){

    var getInfo = JSON.parse(localStorage.getItem('get_info'));
    var dom = document.getElementById('section');

    var names=[]; //initialize names array
    var workRestArr = [];
    var resArr = [];
    var intArr = [];


    for(var key in getInfo){
        var obj = getInfo[key];


        for(var prop in obj){

            dom.innerHTML += "<hr/><div class ='workout_title'> <h1>"+obj[prop].name.replace('_',' ')+"</h1></div>"; //replace underscore with space in workout names with more than one word - display name
            dom.innerHTML += "<div class='workout_desc'><h4>"+obj[prop].desc+"</h4></div>"; //display description

            dom.innerHTML += "<div class='workout_link'><a id='"+obj[prop].name+"'>START >></a></div>";


            names.push(obj[prop].name); //store all ids in names array
            workRestArr.push(obj[prop].work_rest); //store all work_rest in array
            resArr.push(obj[prop].res); // store all resistance levels in array
            intArr.push(obj[prop].intensity); //store all intensity levels in an array

        }

    }


    for(var i = 0; i<names.length; i++){
        var el = document.getElementById(names[i]);
        var w = workRestArr[i];
        var r = resArr[i];
        var int = intArr[i];

        (function(w, r, int) {
            el.addEventListener('click', function() {
                localStorage.setItem('work_rest', JSON.stringify(w));
                localStorage.setItem('resistance', JSON.stringify(r));
                localStorage.setItem('intensity', JSON.stringify(int));
                location.href = '../Workout_Page_example/index.html';
            })
        })(w, r, int);

    }

})

Although I am still unsure of the intricate workings of this code, my assumption is that it involves closures and variable scope. It would be beneficial to have a detailed explanation. Thank you

Answer 4

I managed to solve the issue:

 window.addEventListener('load', function(){

    var getInfo = JSON.parse(localStorage.getItem('get_info'));
    var dom = document.getElementById('section');

    var names=[]; //initialize names array
    var workRestArr = [];
    var resArr = [];
    var intArr = [];


    for(var key in getInfo){
        var obj = getInfo[key];


        for(var prop in obj){

            dom.innerHTML += "<hr/><div class ='workout_title'> <h1>"+obj[prop].name.replace('_',' ')+"</h1></div>"; //replace underscore with space in workout names with more than one word - display name
            dom.innerHTML += "<div class='workout_desc'><h4>"+obj[prop].desc+"</h4></div>"; //display description

            dom.innerHTML += "<div class='workout_link'><a id='"+obj[prop].name+"'>START >></a></div>";


            names.push(obj[prop].name); //store all ids in names array
            workRestArr.push(obj[prop].work_rest); //store all work_rest in array
            resArr.push(obj[prop].res); // store all resistance levels in array
            intArr.push(obj[prop].intensity); //store all intensity levels in an array

        }

    }


    for(var i = 0; i<names.length; i++){
        var el = document.getElementById(names[i]);
        var w = workRestArr[i];
        var r = resArr[i];
        var int = intArr[i];

        (function(w, r, int) {
            el.addEventListener('click', function() {
                localStorage.setItem('work_rest', JSON.stringify(w));
                localStorage.setItem('resistance', JSON.stringify(r));
                localStorage.setItem('intensity', JSON.stringify(int));
                location.href = '../Workout_Page_example/index.html';
            })
        })(w, r, int);

    }

})

Although I am still unsure of the intricate workings of this code, my assumption is that it involves closures and variable scope. It would be beneficial to have a detailed explanation. Thank you

leveraging the localStorage feature in a for-in iteration

Answer №1

Answer №2

Similar questions

What could be causing my update function to not run when I refresh the page?

renewing a div element without the need to reload the entire webpage

The node-vibrant module in combination with React

The beforeRouteUpdate hook in vue-router is unable to access the `this` keyword

What is the best way to include a new property to an existing interface and then export the updated interface in Typescript?

The functionality of Vue is acting up with the HTML, unexpectedly refreshing when a button is clicked

Asynchronous task within an if statement

What is the method for obtaining the div ID's from this form?

Ways to resolve the issue of BrowserWindow not being recognized as a constructor when trying to create a child window within the Electron

Execute JavaScript code once all the AngularJS template directives are fully loaded

Testing components in React Native using asynchronous Jest methods

Sending an HTTP post request with form data and various field controls will not be directed to a Java backend

Can you explain the error message "a.split is not a function" in an Angular context?

When additional elements follow, the button ceases to function properly in JavaScript

Assessing personalized directive attributes

The challenge of navigating through $scope

What could be causing my images not to show up when I use string interpolation for src links in Vue.js?

The save feature becomes dysfunctional after switching to the Material-UI dependency in a React project

What is the best way to pass an array of 8-digit strings from an input in Angular to a Node.js backend?

Unattaching Events in AngularJS