adding data() to an html element using new operator

Question

I just wrote a very simple snippet to understand how jQuery data() functions and the code is as follows:

$(function () {     
        carousel = function() {
          this.prop1 = 1;
          this.prop2 = 'two';
          this.prop3 = 3;  
        }
        var _str = $('#test'),
        $str_data = _str.data();
        console.log($str_data);
        data = _str.data('carousel');

        if (!data) _str.data('carousel' , new carousel());  
        console.log(data);  

        if (!data) {
            console.log('no data');
        }
});

Now, the objective of this code was to add data() to the div element using the new operator and then checking if that piece of data was added, however in my snippet of code in-spite of me adding data to the div element using the below line of code:

if (!data) _str.data('carousel' , new carousel());

When I checked again to see on the next line if data is actually added:

if (!data) {
    console.log('no data');
}

The test passes, which means no data was added. So what am I missing?

Shouldn't you log `_str.data()` instead of `data` ? So you fetch the new, updated data instead the old var. I dont blieve it is an instance, or is it? — steven, May 14 '15 at 11:10
does your _str.data('carousel') start out with data? what do you get if you do a console.log of _str.data('carousel') before data = _str.data('carousel'); ? If you don't have starting data, that setting of 'carouse' will not execute. — Taplar, May 14 '15 at 11:10

score 1 · Answer 1 · answered May 14 '15 at 11:09

1

If there is no data, you are updating the data associated with the element but the value referred by the data variable is not updated that is why it is still giving undefined as its value.

$(function () {

    var carousel = function () {
        this.prop1 = 1;
        this.prop2 = 'two';
        this.prop3 = 3;
    }

    var _str = $('#test'),
        $str_data = _str.data();

    console.log($str_data);

    var data = _str.data('carousel');

    if (!data) {
        //create a new carousel and assign it to data so that it gets a new value
        data = new carousel();
        //store the new carousel value
        _str.data('carousel', data);
    }

    console.log(data);

    if (!data) {
        console.log('no data');
    }

});

Demo: Fiddle

answered May 14 '15 at 11:09

Arun P Johny

384,651
66
527
531

or should't `_str.data('carousel', (new carousel()));` also work ?? – Tenali_raman May 14 '15 at 11:24
@Tenali_raman that will set the data of the element but the local variable `data` will not be updated – Arun P Johny May 14 '15 at 11:27
are you refering to the data inside if as local ?? – Tenali_raman May 14 '15 at 11:29
@Tenali_raman `data = _str.data('carousel');` this variable is not updated after new object is created – Arun P Johny May 14 '15 at 11:32
! ohh yes , moment of realization , can you explain in sentence , why that happens , is that because `data` holds the old value ? – Tenali_raman May 14 '15 at 11:34
! what do you mean by 'something like that' ? :) – Tenali_raman May 14 '15 at 17:35

score 1 · Answer 2 · answered May 14 '15 at 11:11

1

The problem is that you are not updating the data variable's value. You need either to set again the data value after setting the carousel or to call directly the jquery function .data() as the example bellow:

data = _str.data('carousel');

// this condition is not updating the variable defined above
if (!data) {
    _str.data('carousel' , new carousel());
}

console.log(data);  

// you have to update the variable value or to call as
if (!_str.data('carousel')) {
    console.log('no data');
}

answered May 14 '15 at 11:11

Mihai Matei

24,166
5
32
50

Why does `_str.data('carousel'` work and `data` not work , when both are actually the same , because `data = _str.data('carousel');` , if you can explain that , i'll accept your answer !. – Tenali_raman May 14 '15 at 11:21
The accepted answer of the following question is exlaining exactly what `pass-by-reference` means and that this is not available in javascript http://stackoverflow.com/questions/7744611/pass-variables-by-reference-in-javascript – Mihai Matei May 14 '15 at 11:29

adding data() to an html element using new operator

2 Answers2