Заполнение массивов после их определения

Question

У меня есть ul, содержащий li, в котором содержатся названия разных ингредиентов рецептов для страницы рецепта. Я пытаюсь получить эти ингредиенты и хранить их в массиве JavaScript внутри объекта. Я уже знаю название рецепта, поэтому я положил это прямо в свойство объекта 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.ingredients) я просто получаю ошибку Uncaught ReferenceError: ingredient is not defined

Нет сомнений, что это просто, я просто редко нужно использовать массивы в JavaScript так мало опыта работы с ними ,

Answer 1

Откройте консоль и запустить его

var recipeobj = { 
 
    title: $('h3.title').html(), 
 
    // ingredients is empty for now 
 
    ingredients: [] 
 
}; 
 

 
$.each($('ul.ingredients > li > h4'), function(index, ingredient) { 
 
    // Get the name 
 
    var name = $(ingredient).html(), 
 
     // Find out if it is 'optional'(using a class here) 
 
     optional = $(ingredient).hasClass('optional'); 
 
    // Push a new ingredient into the array 
 
    recipeobj.ingredients.push({ name: name, optional: optional }); 
 
}); 
 

 
console.log(recipeobj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3 class="title">Pork and beans</h3> 
 

 
<ul class="ingredients"> 
 
    <li> 
 
    <h4>Pork</h4> 
 
    </li> 
 
    <li> 
 
    <h4>Beans</h4> 
 
    </li> 
 
    <li> 
 
    <h4 class="optional">Salt*</h4> 
 
    </li> 
 
</ul>

Это должно выход:

{ 
    "title": "Pork and beans", 
    "ingredients": [ 
     { name : "Pork", optional : false }, 
     { name : "Beans", optional : false }, 
     { name : "Salt*", optional : true} 
    ] 
} 

Answer 2

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

доступа

var rItem = rObj.ingredients[1]; 

или вы хотите

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

доступом

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

Структура вы пытаетесь использовать как выглядит структура должна быть как

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

доступа

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

Answer 3

var rObj = { 
     title: $('h3.title').val(), 
     ingredients : [] 
    }; 

вы можете добавить ингредиенты:

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