Unable to push checkbox values to array

Question

Unable to print fields value. Throws "Cannot read property 'push' of undefined" error

My component.html

<div class="checkbox abc-checkbox abc-checkbox-success">
 <input class="inputChk" value="Serial_Number" id="ser_num" type="checkbox" checked="true">
 <label for="Serial_Number">Serial Number</label>
</div>
<div class="checkbox abc-checkbox abc-checkbox-success">
 <input class="inputChk" value="Stock_Number" id="stk_num" type="checkbox" checked="true">
 <label for="Stock_Number">Customer Stock Number</label>
</div>   
<button type="button" class="btn btn-primary" (click)="submitCheckedValues()">Submit</button>

My component.ts

export class Sample{
 fields: String[] = [];

 submitCheckedValues(){
    $('input:checkbox.inputChk').each(function ()  {
        var sThisVal = (this.checked ? $(this).val() : "");

        //printing sThisVal; 

        if(sThisVal){
            this.fields.push(sThisVal);
        }
    });
    console.log(this.fields);
}

First thing I'd make sure of is that "this" inside of the function is what you think it is. — Bemmu
– Bemmu, Commented Mar 26, 2018 at 11:39
$(this).val() you mean? That is the checkbox value at each iteration — Esco
– Esco, Commented Mar 26, 2018 at 11:41

31piy · Accepted Answer · 2018-03-26 11:41:05Z

5

There is this error because this.fields is not pointing to the fields property of the class. this refers to the scope of the anonymous function instead.

You need to save the reference in a local variable before executing the code:

submitCheckedValues(){
    let self = this; // Store the reference

    $('input:checkbox.inputChk').each(function ()  {
        var sThisVal = (this.checked ? $(this).val() : "");

        //printing sThisVal; 

        if(sThisVal){
            self.fields.push(sThisVal); // Use the reference of self here
        }
    });

    console.log(this.fields);
}

answered Mar 26, 2018 at 11:41

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bemmu Over a year ago

@Esco Click the checkmark to mark this question as the accepted answer if it solved your problem, it gives some extra karma to the answerer.

Esco Over a year ago

OK I just did. I'm new here

Nishant Dixit · Accepted Answer · 2018-03-26 11:54:08Z

0

I want to give another solution if you want to try

 $.each([1, 2, 3], (function(i, e) {
    console.log(this);
 }).bind(this));

You can bind each function with this after that you can access this inside each.

answered Mar 26, 2018 at 11:54

Nishant Dixit

5,5125 gold badges22 silver badges32 bronze badges

Collectives™ on Stack Overflow

Unable to push checkbox values to array

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related