遍历对象文字的属性

Question

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 1

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);
        }
    }
};

Answer 2

When iterating over objects, either make sure to use hasOwnProperty to filter:

var o = { ... };
for (var p in o) {
  if (o.hasOwnProperty(p)) {
    // process o[p]
  }
}

or use the Object.keys() that filters for you:

for (var p in Object.keys(o)) {
  // process o[p]
}

Answer 3

I just noticed in your code:

newRecipe[recipeName] = {
    'recipeType': recipeType, 'recipePersonsCount': recipePersonsCount,
    'recipeTime': recipeTime, 'recipeContents': recipeContents,
    'recipeInstructions': recipeInstructions
};

You don't need to use apostrophes unless the key contains characters such as - or numbers.

This is valid:

var object = {
    firstname: 'Bob'
}

This is invalid:

var object = {
    first-name: 'Bob'
}

But, this is valid:

var object = {
    'first-name': 'Bob'
}

This is invalid:

var object = {
    0: 'Bob'
}

But, this is valid:

var object = {
    '0': 'Bob'
}

Your code will still work if you change it to this:

newRecipe[recipeName] = {
    recipeType: recipeType, recipePersonsCount: recipePersonsCount,
    recipeTime: recipeTime, recipeContents: recipeContents,
    recipeInstructions: recipeInstructions
};

You can write it like that, but normally, we might list them because it's more clear:

newRecipe[recipeName] = {
    recipeType: recipeType,
    recipePersonsCount: recipePersonsCount,
    recipeTime: recipeTime,
    recipeContents: recipeContents,
    recipeInstructions: recipeInstructions
};

Now, here's where it gets sweet. You can use ES6 Object Literal Shorthand Syntax . If an object's property key is the same as the variable name assigned to its value, you can do this:

newRecipe[recipeName] = {
    recipeType,
    recipePersonsCount,
    recipeTime,
    recipeContents,
    recipeInstructions
};

Try it out in your code :)

To visualize it a bit better, run this sampler pack:

 var test = '100% neat'; var bonus = true; var cool = { test, bonus }; console.log(cool); console.log('Confirmed:', cool.test);