JavaScript console.dir and runtime

Question

I'm trying to use an object for javascript to hold my main elements etc. And my object will grab contents from the HTML elements. And I'm trying to use console.dir to see if my data is grabbed correctly.

The issue is, console.dir shows all values at once instead adding each element one by one. I'm using jQuery's each function.

Here is the fiddle ;

https://jsfiddle.net/365dzdhh/9/

Here is the code ;

(function(jQuery) {
    'use strict';

  window.DOER = {

    saver:function(e){
        e.preventDefault();

      var sel = jQuery('.sel');

      var data = {};

      sel.find('.sell-me').each(function(){
        //Shouldn't this show values one by one instead of all in one at once?
        console.dir(data);
        data = window.DOER.grabber(jQuery(this), data);
      });
      console.dir(data);
    },

    grabber:function(el,data){

        data[jQuery(el).attr('id')] = jQuery(el).val();

      return data;
    },

    init:function(){
        jQuery(document).on('click', '.save-it', this.saver);
    }
  };

}($));

$(document).ready(function(){
    window.DOER.init();
});

If you check the console, you'll see the log in the line "15" shows every details each time. Shouldn't it add each value by looping one by one? Am I missing something here?

score 0 · Answer 1 · answered Jul 23 '18 at 15:32

I think this will give you the console info you want. console.dir(this) on line 15.

(function(jQuery) {
    'use strict';

  window.DOER = {

    saver:function(e){
        e.preventDefault();

      var sel = jQuery('.sel');

      var data = {};

      sel.find('.sell-me').each(function(dataForEach){
        //Shouldn't this show values one by one instead of all in one at once?
        console.dir(this);
        data = window.DOER.grabber(jQuery(this), data);
      });
      console.dir(data);
    },

    grabber:function(el,data){

        data[jQuery(el).attr('id')] = jQuery(el).val();

      return data;
    },

    init:function(){
        jQuery(document).on('click', '.save-it', this.saver);
    }
  };

}($));

$(document).ready(function(){
    window.DOER.init();
});

JavaScript console.dir and runtime

1 Answers1