Access class properties in javascript from class method

Question

this my first try doing the mvc model with classes in javascript.

With the method getFormValues() of the model object of my controller object app I want to read the values of all the input files . Then I want to save them to the form values property of the model object of my controller object. This doesn`t work!

The line console.log(app.model.getFormValues()); shows me the Array with the form values.

The line console.log(app.model.formValues); shows me an empty Array.

How can I store the array from the method getFormValues in the property formValues of the model object?

My HTML:

<!doctype html>
<html lang="en">
 <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

   <title>Hello, world!</title>
 </head>
 <body>

   <form>
     <div class="row">
       <div class="col">
         <input type="text" class="form-control" placeholder="First name">
       </div>
       <div class="col">
         <input type="text" class="form-control" placeholder="Last name">
       </div>
     </div>
   </form>

   <button id="verification"> Verify</button>


   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

   <script src="js.js"></script>
 </body>
</html>

My JS/Jquery:

class Model {

  constructor() {
    this.formValues = this.getFormValues();
  }

   getFormValues() {
    let $inputs = $("input");
    var formValues = [];
    $inputs.each(function(index) {
      let value1 = $(this).val();
      formValues.push(value1);
    });
    return formValues;
   }


}

class View {
  constructor() {}
}

class Controller {
  constructor(model, view) {
    this.model = model
    this.view = view
  }
}

const app = new Controller(new Model(), new View());

check = function () {
  console.log(app.model.getFormValues());
  console.log(app.model.formValues);
}

$("#verification").on("click", check);

Greetings and thanks in advance Fabian

Is your Model object possibly created before the DOM elements exist and thus $("input"); would be empty when the constructor runs and you set the value of this.formValues? — jfriend00
– jfriend00, Commented Apr 14, 2020 at 7:15
Nope just tried it with the $( document ).ready(function() {....}); same result. — Fabian Andiel
– Fabian Andiel, Commented Apr 14, 2020 at 7:19
Just put a console.log(this.formValues) at the end of the constructor and see if it's correct there. If it is, then do console.log(app.model) in your check() function to see if that's the object you expect. This is simple debugging to see whether the property isn't getting populated propertly or whether you're not looking at the right object later or whether something else has changed. Since you don't show us all your code, we can't run it to debug it. You have to do that. — jfriend00
– jfriend00, Commented Apr 14, 2020 at 7:21
So, at the time you create the Model class, your form elements are empty, right? Nothing has been entered into them yet. So, their values would naturally be empty, right? — jfriend00
– jfriend00, Commented Apr 14, 2020 at 7:31
I posted the whole JS code, the HTML Code is now fully visible — Fabian Andiel
– Fabian Andiel, Commented Apr 14, 2020 at 7:32

Aaron · Accepted Answer · 2020-04-14 07:32:28Z

Your problem is based on the creation of the app constant.

You create the app constant when you first load the page. At this point the inputs are empty so are they for the app constant.

Edit: update your variable when you click your button like in my snippet.

class Model {

  constructor() {
    this.formValues = this.getFormValues();
  }

   getFormValues() {
    let $inputs = $("input");
    var formValues = [];
    $inputs.each(function(index) {
      let value1 = $(this).val();
      formValues.push(value1);
    });
    return formValues;
   }


}

class View {
  constructor() {}
}

class Controller {
  constructor(model, view) {
    this.model = model
    this.view = view
  }
}

const app = new Controller(new Model(), new View());

check = function () {
  app.model.formValues = app.model.getFormValues();
  console.log(app.model.getFormValues());
  console.log(app.model.formValues);
}

$("#verification").on("click", check);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
     <div class="row">
       <div class="col">
         <input type="text" class="form-control" placeholder="First name">
       </div>
       <div class="col">
         <input type="text" class="form-control" placeholder="Last name">
       </div>
     </div>
   </form>

   <button id="verification"> Verify</button>

Collectives™ on Stack Overflow

Access class properties in javascript from class method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related