Javascript 在数组定义后填充数组

我有一个

ul

包含

li

，其中包含一个配方页面中不同配方成分的名称。我试图获取这些成分并将它们存储到对象中的JavaScript数组中。我已经知道菜谱的标题，所以我把它放在object属性

title

中，但我不知道每个菜谱有多少成分。以下是我所拥有的：

var recipeobj = {
        title: $('h3.title').val(),
        ingredients: [
                ingredient,
                optional
        ]
    }
    $.each($('ul.ingredients > li > h4'), function (index, ingredient) {
        recipeobj.ingredients[index].ingredient = $(ingredient).html();
        recipeobj.ingredients[index].optional = false;
    })

如果我尝试执行

console.log（recipeobj.Components）

我只会得到错误

Uncaught ReferenceError:Components未定义

毫无疑问，这很简单，我只是很少需要在JavaScript中使用数组，所以对它们几乎没有经验

var rObj = {
        title: $('h3.title').val(),
        ingredients: [
                'source cream',
                'cheese',
                'chopped meat'
        ],
        optional: true
    };

访问

var rItem = rObj.ingredients[1];

var rItem = rObj.ingredients.ingredient_list[1];

var ingred = rObj.things[1].ingredient;

或者你想要

var rObj = {
        title: $('h3.title').val(),
        ingredients: {
                ingredient_list: ['one','two','three'],
                optional: true
        }
    };

访问

var rItem = rObj.ingredients[1];

var rItem = rObj.ingredients.ingredient_list[1];

var ingred = rObj.things[1].ingredient;

您尝试使用的结构看起来应该是

var rObj = {
            title: $('h3.title').val(),
            things: [{
                ingredient: 'source cream',
                optional: true
            },
            {
                ingredient: 'cheese',
                optional: false
            }]
        };

访问

var rItem = rObj.ingredients[1];

var rItem = rObj.ingredients.ingredient_list[1];

var ingred = rObj.things[1].ingredient;

---

打开控制台并运行它

var recipeobj={
标题：$（'h3.title'）.html（），
//配料现在是空的
成分：[]
};
$。每个（$（'ul.Components>li>h4'），功能（索引，成分）{
//得到名字
变量名称=$（成分）.html（），
//了解它是否为“可选”（在此处使用类）
可选=$（成分）.hasClass（'optional'）；
//将一种新的配料放入数组中
recipeobj.Components.push（{name:name，optional:optional}）；
});
控制台日志（recipeobj）

猪肉和豆类


猪肉


豆


盐*


您可以添加以下成分：

      $.each($('ul.ingredients > li > h4'), function (index, ingredient) {
     rObj.ingredients.push({ingredient: $(ingredient).html(), optional       :false})
 })

您似乎在数组和对象方面遇到了问题。什么是
可选的
？您正在混合javascript和javascript对象表示法。还有其他语法问题。@eyegropram没问题，javascript对象表示法（JSON）就是javascript。主要的问题是，他在定义变量之前使用变量。但是，最终想要的结构还不是很清楚。弗雷特，你能举一个例子说明最后的
recipeobj
应该是什么样的吗？我不是在暗示语言的差异。他正在混合各种风格，对如何构造代码缺乏核心理解。@blex
optional
属性用于指示配方中的成分是否可选。我意识到我当前的代码将每个配料的
可选
属性设置为false。第三个例子正是我想要得到的：配料对象数组。我想象工作结果看起来像`成分：[{成分：'源奶油'，可选：假}，{成分：'奶酪'，可选：假}]是的，这更像是你期待的。汉克斯blex，请看我对eyegropram回答的评论，以便更好地理解structure@Frayt更新。试试看，打开你的控制台