Luca Schumann Luca Schumann - 3 years ago 149
Javascript Question

Iterate through properties of a object literal

I have the following code to save some values to the local storage and display it afterwards as a list. The problem I have is with displayRecipes(). It only displays the recipeName value and everything else is undefined. As you can see I store all recipes in localStorage.recipes with the recipe name on the top level and all the other values as "sub-properties" like this: {'recipeName: {'other values and properties'...}}.
I'm fairly new to JavaScript so I just thought 'undefined' means that the variables have not been initialized correctly. I'm initializing and assigning them in addNewRecipe() but by the time I want to display them they're already stored in local storage.

Thank you in advance for any help.

function addNewRecipe() {
var recipeName = $('#recipeName').val();
var recipeType = $('#recipeType').val();
var recipePersonsCount = $('#recipePersonsCount').val();
var recipeTime = $('#recipeTime').val();
var recipeContents = $('#recipeContents').val();
var recipeInstructions = $('#recipeInstructions').val();

// Checks if recipes variable already exists
// If yes: get content, parse it, add new data to array and store it again
// If no: create new variable and store it
if (localStorage.recipes) {
var getRecipes = JSON.parse(localStorage.getItem('recipes'));
var newRecipe = getRecipes;
newRecipe[recipeName] = {'recipeType': recipeType, 'recipePersonsCount': recipePersonsCount,
'recipeTime': recipeTime, 'recipeContents': recipeContents,
'recipeInstructions': recipeInstructions};
localStorage.setItem('recipes', JSON.stringify(newRecipe));
} else {
var recipe = {};
recipe[recipeName] = {'recipeType': recipeType, 'recipePersonsCount': recipePersonsCount,
'recipeTime': recipeTime, 'recipeContents': recipeContents,
'recipeInstructions': recipeInstructions};
localStorage.setItem('recipes', JSON.stringify(recipe));
};
};

function getRecipes() {
var existingRecipes = JSON.parse(localStorage.getItem('recipes'));
return existingRecipes;
};

function displayRecipes() {
var recipes = getRecipes();
for (var key in recipes) {
if (!$('#rec').val()) {
$('#recipeList').add('<ul id="#rec">' + key + '</ul>').appendTo(document.body);
$('#rec').add('<li>' + key.recipeType + '</li>').appendTo(document.body);
$('#rec').add('<li>' + key.recipePersonsCount + '</li>').appendTo(document.body);
$('#rec').add('<li>' + key.recipeTime + '</li>').appendTo(document.body);
$('#rec').add('<li>' + key.recipeContents + '</li>').appendTo(document.body);
$('#rec').add('<li>' + key.recipeInstructions + '</li>').appendTo(document.body);
}
}
};

Answer Source

You are accessing your object values wrong.

Change

function displayRecipes() {
    var recipes = getRecipes();
    for (var key in recipes) {
        if (!$('#rec').val()) {
            $('#recipeList').add('<ul id="#rec">' + key + '</ul>').appendTo(document.body);
            $('#rec').add('<li>' + key.recipeType + '</li>').appendTo(document.body);
            $('#rec').add('<li>' + key.recipePersonsCount + '</li>').appendTo(document.body);
            $('#rec').add('<li>' + key.recipeTime + '</li>').appendTo(document.body);
            $('#rec').add('<li>' + key.recipeContents + '</li>').appendTo(document.body);
            $('#rec').add('<li>' + key.recipeInstructions + '</li>').appendTo(document.body);
        }
    }
};

to

function displayRecipes() {
    var recipes = getRecipes();
    for (var key in recipes) {
        if (!$('#rec').val()) {
            $('#recipeList').add('<ul id="#rec">' + recipes[key] + '</ul>').appendTo(document.body);
            $('#rec').add('<li>' + recipes[key].recipeType + '</li>').appendTo(document.body);
            $('#rec').add('<li>' + recipes[key].recipePersonsCount + '</li>').appendTo(document.body);
            $('#rec').add('<li>' + recipes[key].recipeTime + '</li>').appendTo(document.body);
            $('#rec').add('<li>' + recipes[key].recipeContents + '</li>').appendTo(document.body);
            $('#rec').add('<li>' + recipes[key].recipeInstructions + '</li>').appendTo(document.body);
        }
    }
};
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download