Creating an object from input values and then passing it into an array

305

November 26, 2016, at 10:17 AM

Couldn't fit the entirety of the problem into the Title, so I will try to explain myself better here.

Trying to create a recipe book app.

I have an html file with a few input fields and div elements to which I have to append a recipe when it is created.

So I have two classes separated in modules - recipe and book, and an app.js file which should then combine the both into a working app.

var recipe = (function() {
  var nextId = 1;
  var constr = function(name, rating, image, category) {
    this._id = nextId++;
    this._name = name;
    this._rating = rating;
    this._image = image;
    this._category = category;
    this.setName = function(name) {
      this._name = name;
    };
    this.setRating = function(rating) {
      this._rating = rating;
    };
    this.setImage = function(image) {
      this._image = image;
    };
    this.setCategory = function(category) {
      this._category = category;
    };
  };
  return constr;
})();

And

var book = (function() {
  var construct = function(recipes) {
    this._recipes = recipes;
    this.addRecipe = function(recipe) {
      this._recipes.push(recipe);
    };
    this.removeRecipe = function(id) {
      this._recipes.splice(id, 1);
    };
    this.getRecipes = function() {
      return this._recipes;
    };
  };
  return construct;
})();

And a glimpse of app.js

var app = app || {};
(function(recipeBook) {
    var book = new recipeBook.book();
    $('#add_book').click(function(ev) {

      }
      console.log('add new recipe to book');

    });
 ...............

What I need to do is take the values of the four input fields I have and pass them as arguments to the recipe class to create a new object with the values of the input fields , after which I have to add that object into an array called recipes in the book module.

Any help would be greatly appreciated as I have been trying to figure out how to make this work for a few days with no major success.

Thank you!

Answer 1

It looks like you have an extra } in your click handler. Probably a typo. It's confusing that you name your book ctor 'book' and later use the same name for an instance of book. The book constructor needs to be passed an array to assign to its _recipes property. You could do

`this._recipes = recipes || [];

The fiddly stuff aside, I'm not sure what is puzzling you. You would need to get the data out of the HTML, probably using jQuery and statements like

`var name = $('input selector string').val()`
 or possibly 
`var rating = $('div selector string').html()'

etc ...

and then invoke your recipe constructor with these values

and finally add it to your book as book.add( newRecipe )

Answer 2

You should do something like this:

<form id="newRecipe">
    <input id="name" type="text"/>
    <input id="rating" type="text"/>
    <input id="file" type="file"/>
    <select id="category" >
        <option>Cat 1</option>
        <option>Cat 2</option>
    </select>
    <input type="submit" value="Add Recipe" />
</form>
<script>
$("#newRecipe").submit(function(){
    var name = $(this).find("#name").val();
    var rating = $(this).find("#rating").val();
    .....
})
</script>

On the other hand, I can't really understand the way you are creating your objects. You are implementing auto executing functions.

Seems to me the right way is like:

function recipe(name, rating){
    this._name = name;
    this._rating = rating;
    this.setName = function(name) {
       this._name = name;
    };
    //your methods here
}