Можете ли вы использовать массив в качестве значения свойства объекта?

Question

Я пытаюсь написать JavaScript для карточек рецептов. Я подумал, что лучше всего использовать конструктор объекта, потому что я создаю несколько рецептов с одинаковыми критериями. Мне нужно использовать массив для ингредиентов, но я не могу заставить его работать. Единственное, что будет отображаться - это имя рецепта, а массив возвращается неопределенным.

Я чрезвычайно новичок в JS, поэтому, пожалуйста, разберитесь со мной, как с ребенком, и при этом будьте добры:)

Кроме того, я прошу прощения, что код написан таким образом. Я нахожусь в мобильном приложении, поэтому я не даю мне возможность написать его в определенных полях, как обычно. Если вы предпочитаете, вот CodePen: https://codepen.io/Nikofem/pen/RwwgGog

Вот HTML-код:

<div class="recipe-card">
<aside>
    <img src="https://divascancook.com/wp-content/uploads/2015/01/no-bake-engery-bites-peanut-butter-chocolate-healthy-granola-snack-recipe-2.jpg" alt="Granola Engergy Bites" />
</aside>
<article>
    <h2 id="name1"></h2>
    <h4 id="ingredients1"></h4>
    <ul>
        <li><span class="icon icon-users"></span><span>10 - 15</span></li>
        <li><span class="icon icon-clock"></span><span>15 min</span></li>
    </ul>   
</article>
</div>

Вот код JS, который у меня есть:

function Recipe(name, ingredients) {
this.name = name;
this.ingredients = [];
}

var recipe1 = new Recipe('Granola Energy Bites', ['1 cup old-fashioned oats', '1/4 tsp salt', '1/4 tsp cinnamon']);

var recipe1Name = recipe1.name;
name1.innerHTML = recipe1Name;

var recipe1Ingredients = recipe1.ingredients[0];
ingredients1.innerHTML = recipe1Ingredients;

Answer 1

В строке 3 вашего javascript вы определяете ингредиенты как пустой массив. Вы можете решить эту проблему, написав

this.ingredients = ingredients

. Вы также можете использовать изящный инструмент, называемый деструктуризацией, если хотите, и можете написать его как

this.ingredients = [...ingredients]

Answer 2

Пожалуйста, попробуйте сначала научиться отладке. Ваша проблема в том, что вы ничего не делаете с параметром ингредиентов.

Ваша функция должна быть:

function Recipe(name, ingredients) {
    this.name = name;
    this.ingredients = ingredients;
}

Код внизу также неверен, он должен быть:

var recipe1 = new Recipe('Granola Energy Bites', ['1 cup old-fashioned oats', '1/4 tsp salt', '1/4 tsp cinnamon']);

var recipe1Name = recipe1.name;
document.getElemendById("name1").innerHTML = recipe1Name;

var recipe1Ingredients = recipe1.ingredients;
insertToIngredients = "";
for (var i = 0; i<recipe1Ingerdients.length; i++) {
    insertToIngredients = insertToIngredients + "<br>"+ recipe1Ingredients[i];
}
document.getElementById("ingredients1").innerHTML = insertToIngredients;