遍歷對象文字的屬性

Question

我有以下代碼將一些值保存到本地存儲中，然后將其顯示為列表。 我的問題是displayRecipes（）。 它僅顯示配方名稱值，其他所有內容均未定義。 如您所見，我將所有配方存儲在localStorage.recipes中，配方名稱位於頂層，所有其他值都作為“子屬性”存儲，如下所示：{'recipeName：{'other values and properties'...}} 。 我對JavaScript相當陌生，所以我只是認為“未定義”意味着變量未正確初始化。 我正在addNewRecipe（）中初始化並分配它們，但是到我想要顯示它們時，它們已經存儲在本地存儲中。

預先感謝您的任何幫助。

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

您訪問的object值錯誤。

更改

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

至

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

遍歷對象時，請確保使用hasOwnProperty進行過濾：

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

或使用為您過濾的Object.keys（） ：

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

Answer 3

我剛剛在您的代碼中注意到：

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

除非鍵包含-或數字之類的字符， 否則無需使用撇號。

這是有效的：

var object = {
    firstname: 'Bob'
}

這是無效的：

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

但是，這是有效的：

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

這是無效的：

var object = {
    0: 'Bob'
}

但是，這是有效的：

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

如果將其更改為此，您的代碼仍將起作用：

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

您可以這樣寫，但通常情況下，我們可能會列出它們，因為它更清楚：

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

現在，這里變得甜美了。 您可以使用ES6 Object Literal Shorthand Syntax 。 如果對象的屬性鍵與為其值分配的變量名稱相同，則可以執行以下操作：

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

在您的代碼中嘗試一下：）

為了更好地顯示它，請運行以下采樣器包：

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