Durch Eigenschaften eines Objektliterals Iterieren

Question

Ich habe den folgenden Code, um einige Werte in dem lokalen Speicher zu speichern und es anschließend als eine Liste anzuzeigen. Das Problem, das ich habe, ist mit displayRecipes(). Es zeigt nur den recipeName-Wert an und alles andere ist nicht definiert. Wie Sie sehen können, speichere ich alle Rezepte in localStorage.recipes mit dem Rezeptnamen auf der obersten Ebene und allen anderen Werten als "Untereigenschaften" wie folgt: {'rezeptName: {' andere Werte und Eigenschaften '...}} . Ich bin ziemlich neu in JavaScript, also dachte ich nur 'undefiniert' bedeutet, dass die Variablen nicht korrekt initialisiert wurden. Ich initialisiere und ordne sie in addNewRecipe(), aber zu dem Zeitpunkt, zu dem ich sie anzeigen möchte, sind sie bereits im lokalen Speicher gespeichert.

Vielen Dank im Voraus für jede Hilfe.

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

Sie greifen auf Ihre object Werte falsch zu.

ändern

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

zu

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

Wenn über Objekte iterieren, entweder stellen Sie sicher, hasOwnProperty zu verwenden zu filtern:

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

oder die Object.keys() verwenden, die für Sie Filter:

Answer 3

ich nur in Ihrem Code bemerkt:

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

Sie brauchen nicht Apostrophe zu verwenden, es sei denn der Schlüssel Zeichen wie - oder Zahlen enthält.

Dies gilt:

var object = { 
    firstname: 'Bob' 
} 

Dies ist ungültig:

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

Aber dies gilt:

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

Dies ist ungültig:

var object = { 
    0: 'Bob' 
} 

Aber dies gilt:

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

wird immer noch Ihr Code funktioniert, wenn Sie es so weit ändern:

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

Sie können es so

schreiben, aber in der Regel, könnten wir sie aufzählen, weil es mehr klar:

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

Jetzt ist hier, wo es süß wird. Sie können ES6 Object Literal Shorthand Syntax verwenden.Wenn ein Objekt der Eigenschaftsschlüssel der gleiche wie der Variablenname, um seinen Wert zugewiesen ist, können Sie dies tun:

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

Probieren Sie es in Ihrem Code aus :)

Um es zu visualisieren ein bisschen besser, führen diese Sampler Pack:

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

 
var cool = { 
 
    test, 
 
    bonus 
 
}; 
 

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