オブジェクトリテラルのプロパティを繰り返します

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">' + 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

オブジェクトを反復に

変更

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

、どちらかフィルタリングする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 = { 
    first-name: 'Bob' 
} 

：しかし

var object = { 
    firstname: '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を使用できます。

​​

はあなたのコードでそれを試してみてください:)

を少し良くそれを可視化するために、これを実行します。オブジェクトのプロパティキーはその値に割り当てられた変数名と同じである場合は、これを行うことができますサンプラーパック：

var test = '100% neat'; 
 
var bonus = true; 
 

 
var cool = { 
 
    test, 
 
    bonus 
 
}; 
 

 
console.log(cool); 
 
console.log('Confirmed:', cool.test);