我正在尝试从对象获取信息并将其置于函数中失败。
附件是我的代码：我尝试连接的部分是recipeType.ingredients到function getRecipeItems()。
HTML很小，所以我只附加JS。
在申请recipeType或name时，它的工作正常，但一旦我要求它丢失的成分。
JS
function getRecipeItems() {
return recipeItems = [
{
"id": "recipe0",
// ...
"price": {
default: 8,
ampm: 10,
// -- haCarmel: 12, -- Let's omit this one
tivTaam: 15,
get: function( merchant ) {
return this[merchant] ? this[merchant] : this.default;
}
}
}
]
}
function getMerchantprices() {
return Merchantprices = [
{
"Booz": {
ampm: 10,
haCarmel: 23,
tivTaam: 35,
get: function (ingredient) {
return this[ingredient] ? this[ingredient] : 0;
}
}
},
{
"Roofis": {
ampm: 10,
haCarmel: 23,
tivTaam: 35,
get: function (ingredient) {
return this[ingredient] ? this[ingredient] : 0;
}
}
},
{
"Green Stuff": {
ampm: 10,
haCarmel: 23,
tivTaam: 35,
get: function (ingredient) {
return this[ingredient] ? this[ingredient] : 0;
}
}
}
];
}
var main = function () {
var recipeType = {
0: {"name": "cocktail",
"ingredients": [{"name":"Booz","price":10},//shouldn't this be merchantPrices.Booz?//
{"name":"Roofis","price":23},
{"name":"Green Stuff","price":8}]},
1: {"name": "appetizer",
"ingredients": [{"name":"Some leaves","price":7},
{"name":"Some veggies","price":17},
{"name":"I dunno toast","price":10},
{"name":"Cheese or whatever","price":17}]},
2: {"name": "main course",
"ingredients": [{"name":"A dead animal","price":35},
{"name":"Its blood","price":5},
{"name":"some potatoes","price":10},
{"name":"asparagus","price":20},
{"name":"love","price":0}]},
3: {"name": "dessert",
"ingredients": [{"name":"Dough","price":9},
{"name":"Some Sprinkly shit","price":18},
{"name":"sugar","price":10},
{"name":"more sugar","price":10},
{"name":"cream shaboogy pop","price":13}]}
};
function getRecipeItems() {
return recipeItems = [
{
"id": "recipe0",
"title": "Grasshopper Cocktail",
"img": "../images/recipeimages/grasshopper-cocktail.jpg",
"ingredients": recipeType[0].ingredients,
"instructions":"shaken not stirred",
"price": 45, //shouldn't this be recipeType[0,1,2].sumprice somehow//
"type" : recipeType[0].name,
},
{
"id": "recipe1",
"title": "Beef roast with veggies",
"img": "../images/recipeimages/beef-roast-with-veggies.JPG",
"ingredients": recipeType[2].ingredients,
"instructions":"stuff it good",
"price": 55,
"type" : recipeType[2].name,
},
{
"id": "recipe2",
"title": "Shrimp-Fried-Rice",
"img": "../images/recipeimages/Shrimp-Fried-Rice.jpg",
"ingredients": recipeType[1].ingredients,
"instructions":"extra MSG",
"price": 65,
"type" : recipeType[1].name,
},
{
"id": "recipe3",
"title": "Cupcake from hell",
"img": "../images/recipeimages/Cupcake-Idea-pics-200x150.jpg",
"ingredients": recipeType[3].ingredients,
"instructions":"death is inevitable",
"price": 15,
"type" : recipeType[3].name,
},
]
}
function createRecipeItem(recipeItem) {
var recipeElement = document.createElement('div');
recipeElement.setAttribute("id", recipeItem.id);
recipeElement.setAttribute("class", recipeItem);
recipeDetailsElement = document.createElement("div");
recipeDetailsElement.setAttribute("id", recipeItem.id+"_details");
recipeDetailsElement.appendChild(createDeleteRecipe(recipeItem));
recipeDetailsElement.appendChild(createRecipePic(recipeItem));
recipeDetailsElement.appendChild(createRecipeTitle(recipeItem));
recipePreperationElement = document.createElement("div");
recipePreperationElement.setAttribute("id", recipeItem.id+"_full_details");
recipePreperationElement.appendChild(createRecipeIngredients(recipeItem));
recipePreperationElement.appendChild(createRecipeInstructions(recipeItem));
recipePreperationElement.style.display = 'none';
recipeDetailsElement.appendChild(recipePreperationElement);
recipeElement.appendChild(createUndoDeleteRecipe(recipeItem));
recipeElement.appendChild(recipeDetailsElement);
return recipeElement;
}
function createUndoDeleteRecipe(recipeItem) {
var undoButton = document.createElement('span');
undoButton.setAttribute("id", recipeItem.id + "_undo");
undoButton.setAttribute("class", "fa fa-undo", "aria-hidden", "true");
$(undoButton).hide();
$(undoButton).click(() => {
onItemDeleteUndo(recipeItem);
});
return undoButton;
}
function createDeleteRecipe(recipeItem) {
var deleteButton = document.createElement('span');
deleteButton.setAttribute("class", "fa fa-times-circle", "aria-hidden", "true");
$(deleteButton).click(() => {
onItemDelete(recipeItem);
});
return deleteButton;
}
function onItemDelete(recipeItem) {
$('#'+recipeItem.id+'_details').hide();
$('#'+recipeItem.id+'_undo').show();
}
function onItemDeleteUndo(recipeItem) {
$('#'+recipeItem.id+'_details').show();
$('#'+recipeItem.id+'_undo').hide();
}
function createRecipeTitle(recipeItem) {
var div = document.createElement('div');
div.innerHTML = recipeItem.title;
return div;
}
function createRecipeInstructions(recipeItem) {
var div = document.createElement('div');
div.innerHTML = recipeItem.instructions;
return div;
}
function createRecipePic(recipeItem) {
var recipePic = document.createElement("img");
recipePic.setAttribute("src", recipeItem.img);
recipePic.setAttribute("class", "recipe");
$(recipePic).css('margin-top', '10px');
$(recipePic).click(() => {
$('#'+recipeItem.id+"_full_details").slideToggle();
});
return recipePic;
}
function createRecipeIngredients(recipeItem) {
var ingredients = document.createElement("ul");
ingredients.setAttribute("id", recipeItem.id + "_ingredients");
ingredients.className = "ingredientsList";
recipeItem.ingredients.forEach(ingredient => {
var li = document.createElement("li");
li.className = "ingredients";
li.setAttribute("type", "checkbox");
var checkbox = document.createElement("input");
checkbox.setAttribute("type", "checkbox");
li.appendChild(checkbox);
var ingredientElement = document.createElement("a");
ingredientElement.innerHTML = ingredient;
li.appendChild(ingredientElement);
ingredients.appendChild(li);
})
return ingredients;
}
recipeItems = getRecipeItems();
var mainContainer = document.getElementsByClassName('mainContainer');
recipeItems.forEach(recipeItem => {
mainContainer[0].appendChild(createRecipeItem(recipeItem));
});
};
var recipeItems;
var Merchantprices;
$(document).ready(main);
答案 0 :(得分：1)
以下出错：
{
"id": "recipe0",
"title": "Grasshopper Cocktail",
"img": "../images/recipeimages/grasshopper-cocktail.jpg",
"ingredients": recipeType[0].ingredients,
"instructions":"shaken not stirred",
"price": 45, //shouldn't this be recipeType[0,1,2].sumprice somehow//
"type" : recipeType[0].name,
}
这是您的getRecipeItems函数返回的数组项。
您可以选择值，并在字符串或数字时打印出来。 recipe[0].id或recipe[0].type。
但是当recipe[0]包含ingredients之类的对象时，它会打印[object Object]。要解决这个问题，您需要访问属性（或迭代它们）。
"ingredients": [{"name":"Booz","price":10}
{"name":"Roofis","price":23},
{"name":"Green Stuff","price":8}]}
recipe[0].ingredients.name。
小概念证明：
var main = function() {
var recipeType = {
0: {
"name": "cocktail",
"ingredients": [{
"name": "Booz",
"price": 10
}, //shouldn't this be merchantPrices.Booz?//
{
"name": "Roofis",
"price": 23
},
{
"name": "Green Stuff",
"price": 8
}
]
},
1: {
"name": "appetizer",
"ingredients": [{
"name": "Some leaves",
"price": 7
},
{
"name": "Some veggies",
"price": 17
},
{
"name": "I dunno toast",
"price": 10
},
{
"name": "Cheese or whatever",
"price": 17
}
]
},
2: {
"name": "main course",
"ingredients": [{
"name": "A dead animal",
"price": 35
},
{
"name": "Its blood",
"price": 5
},
{
"name": "some potatoes",
"price": 10
},
{
"name": "asparagus",
"price": 20
},
{
"name": "love",
"price": 0
}
]
},
3: {
"name": "dessert",
"ingredients": [{
"name": "Dough",
"price": 9
},
{
"name": "Some Sprinkly shit",
"price": 18
},
{
"name": "sugar",
"price": 10
},
{
"name": "more sugar",
"price": 10
},
{
"name": "cream shaboogy pop",
"price": 13
}
]
}
};
function getRecipeItems() {
return recipeItems = [{
"id": "recipe0",
"title": "Grasshopper Cocktail",
"img": "../images/recipeimages/grasshopper-cocktail.jpg",
"ingredients": recipeType[0].ingredients,
"instructions": "shaken not stirred",
"price": 45, //shouldn't this be recipeType[0,1,2].sumprice somehow//
"type": recipeType[0].name,
},
{
"id": "recipe1",
"title": "Beef roast with veggies",
"img": "../images/recipeimages/beef-roast-with-veggies.JPG",
"ingredients": recipeType[2].ingredients,
"instructions": "stuff it good",
"price": 55,
"type": recipeType[2].name,
},
{
"id": "recipe2",
"title": "Shrimp-Fried-Rice",
"img": "../images/recipeimages/Shrimp-Fried-Rice.jpg",
"ingredients": recipeType[1].ingredients,
"instructions": "extra MSG",
"price": 65,
"type": recipeType[1].name,
},
{
"id": "recipe3",
"title": "Cupcake from hell",
"img": "../images/recipeimages/Cupcake-Idea-pics-200x150.jpg",
"ingredients": recipeType[3].ingredients,
"instructions": "death is inevitable",
"price": 15,
"type": recipeType[3].name,
},
]
};
//loop over each recipe:
getRecipeItems().forEach(function(element) {
//we use reduce to return all the ingredients in an array and join to glue together.
var htmlSTRING = "<h2>"+element.title+"</h2>";
htmlSTRING += "<p>Ingredients: <br />" + element.ingredients.reduce(function(a,b){return a.concat(b.name)}, []).join("<br/>") + "</p>";
htmlSTRING += "<p>Instructions: " + element.instructions + "</p>";
document.querySelector("#recipes").insertAdjacentHTML("beforeend", htmlSTRING)
});
};
main();<div id="recipes"></div>
答案 1 :(得分：0)
好的，所以唯一缺少的就是从放置配料的地方调用信息。附件是工作代码：
JS
function getRecipeItems() {
return recipeItems = [
{
"id": "recipe0",
// ...
"price": {
default: 8,
ampm: 10,
// -- haCarmel: 12, -- Let's omit this one
tivTaam: 15,
get: function( merchant ) {
return this[merchant] ? this[merchant] : this.default;
}
}
}
]
}
function getMerchantprices() {
return Merchantprices = [
{
"Booz": {
ampm: 10,
haCarmel: 23,
tivTaam: 35,
get: function (ingredient) {
return this[ingredient] ? this[ingredient] : 0;
}
}
},
{
"Roofis": {
ampm: 10,
haCarmel: 23,
tivTaam: 35,
get: function (ingredient) {
return this[ingredient] ? this[ingredient] : 0;
}
}
},
{
"Green Stuff": {
ampm: 10,
haCarmel: 23,
tivTaam: 35,
get: function (ingredient) {
return this[ingredient] ? this[ingredient] : 0;
}
}
}
];
}
var main = function () {
var recipeType = {
0: {"name": "cocktail",
"ingredients": [{"name":"Booz","price":10},//shouldn't this be merchantPrices.Booz?//
{"name":"Roofis","price":23},
{"name":"Green Stuff","price":8}]},
1: {"name": "appetizer",
"ingredients": [{"name":"Some leaves","price":7},
{"name":"Some veggies","price":17},
{"name":"I dunno toast","price":10},
{"name":"Cheese or whatever","price":17}]},
2: {"name": "main course",
"ingredients": [{"name":"A dead animal","price":35},
{"name":"Its blood","price":5},
{"name":"some potatoes","price":10},
{"name":"asparagus","price":20},
{"name":"love","price":0}]},
3: {"name": "dessert",
"ingredients": [{"name":"Dough","price":9},
{"name":"Some Sprinkly shit","price":18},
{"name":"sugar","price":10},
{"name":"more sugar","price":10},
{"name":"cream shaboogy pop","price":13}]}
};
function getRecipeItems() {
return recipeItems = [
{
"id": "recipe0",
"title": "Grasshopper Cocktail",
"img": "../images/recipeimages/grasshopper-cocktail.jpg",
"ingredients": recipeType[0].ingredients,
"instructions":"shaken not stirred",
"price": 45, //shouldn't this be recipeType[0,1,2].sumprice somehow//
"type" : recipeType[0].name,
},
{
"id": "recipe1",
"title": "Beef roast with veggies",
"img": "../images/recipeimages/beef-roast-with-veggies.JPG",
"ingredients": recipeType[2].ingredients,
"instructions":"stuff it good",
"price": 55,
"type" : recipeType[2].name,
},
{
"id": "recipe2",
"title": "Shrimp-Fried-Rice",
"img": "../images/recipeimages/Shrimp-Fried-Rice.jpg",
"ingredients": recipeType[1].ingredients,
"instructions":"extra MSG",
"price": 65,
"type" : recipeType[1].name,
},
{
"id": "recipe3",
"title": "Cupcake from hell",
"img": "../images/recipeimages/Cupcake-Idea-pics-200x150.jpg",
"ingredients": recipeType[3].ingredients,
"instructions":"death is inevitable",
"price": 15,
"type" : recipeType[3].name,
},
]
}
function createRecipeItem(recipeItem) {
var recipeElement = document.createElement('div');
recipeElement.setAttribute("id", recipeItem.id);
recipeElement.setAttribute("class", recipeItem);
recipeDetailsElement = document.createElement("div");
recipeDetailsElement.setAttribute("id", recipeItem.id+"_details");
recipeDetailsElement.appendChild(createDeleteRecipe(recipeItem));
recipeDetailsElement.appendChild(createRecipePic(recipeItem));
recipeDetailsElement.appendChild(createRecipeTitle(recipeItem));
recipePreperationElement = document.createElement("div");
recipePreperationElement.setAttribute("id", recipeItem.id+"_full_details");
recipePreperationElement.appendChild(createRecipeIngredients(recipeItem));
recipePreperationElement.appendChild(createRecipeInstructions(recipeItem));
recipePreperationElement.style.display = 'none';
recipeDetailsElement.appendChild(recipePreperationElement);
recipeElement.appendChild(createUndoDeleteRecipe(recipeItem));
recipeElement.appendChild(recipeDetailsElement);
return recipeElement;
}
function createUndoDeleteRecipe(recipeItem) {
var undoButton = document.createElement('span');
undoButton.setAttribute("id", recipeItem.id + "_undo");
undoButton.setAttribute("class", "fa fa-undo", "aria-hidden", "true");
$(undoButton).hide();
$(undoButton).click(() => {
onItemDeleteUndo(recipeItem);
});
return undoButton;
}
function createDeleteRecipe(recipeItem) {
var deleteButton = document.createElement('span');
deleteButton.setAttribute("class", "fa fa-times-circle", "aria-hidden", "true");
$(deleteButton).click(() => {
onItemDelete(recipeItem);
});
return deleteButton;
}
function onItemDelete(recipeItem) {
$('#'+recipeItem.id+'_details').hide();
$('#'+recipeItem.id+'_undo').show();
}
function onItemDeleteUndo(recipeItem) {
$('#'+recipeItem.id+'_details').show();
$('#'+recipeItem.id+'_undo').hide();
}
function createRecipeTitle(recipeItem) {
var div = document.createElement('div');
div.innerHTML = recipeItem.title;
return div;
}
function createRecipeInstructions(recipeItem) {
var div = document.createElement('div');
div.innerHTML = recipeItem.instructions;
return div;
}
function createRecipePic(recipeItem) {
var recipePic = document.createElement("img");
recipePic.setAttribute("src", recipeItem.img);
recipePic.setAttribute("class", "recipe");
$(recipePic).css('margin-top', '10px');
$(recipePic).click(() => {
$('#'+recipeItem.id+"_full_details").slideToggle();
});
return recipePic;
}
function createRecipeIngredients(recipeItem) {
var ingredients = document.createElement("ul");
ingredients.setAttribute("id", recipeItem.id + "_ingredients");
ingredients.className = "ingredientsList";
recipeItem.ingredients.forEach(ingredient => {
var li = document.createElement("li");
li.className = "ingredients";
li.setAttribute("type", "checkbox");
var checkbox = document.createElement("input");
checkbox.setAttribute("type", "checkbox");
li.appendChild(checkbox);
var ingredientElement = document.createElement("a");
ingredientElement.innerHTML = ingredient.name;
li.appendChild(ingredientElement);
ingredients.appendChild(li);
})
return ingredients;
}
recipeItems = getRecipeItems();
var mainContainer = document.getElementsByClassName('mainContainer');
recipeItems.forEach(recipeItem => {
mainContainer[0].appendChild(createRecipeItem(recipeItem));
});
};
var recipeItems;
var Merchantprices;
$(document).ready(main);