CODEWITHSUNDEEP
angulargoogle-chromeconsole.log
Chandan
Chandan

Reputation: 404

Chrome's console.log prints incorrect var value

I have two way binding for boolean values in an Angular application. In my component, I have declared the variable as follows

data = [
    {name:'xyz', value:'0', checked:false},
    {name:'abc', value:'1', checked:false},
    {name:'def', value:'2', checked:false}
];

In my HTML file I have following code:

    <li *ngFor="let option of data">
        <label>
            <input type="checkbox"
                   (click)="clicked($event)"
                   name="options"
                   value="{{option.value}}"
                   [(ngModel)]="option.checked" />
                {{option.name}}
        </label>
    </li>

The clicked function is given below:

    clicked(event:any) {
        console.log(this.data);
        for(var i=0; i<this.data.length; i++) {
            console.log(this.data[i]);
        }
    }

I am facing a weird behaviour as console.log(this.data) is printing something different than the individual console.log I do for each option:

enter image description here

Can anyone tell what is going wrong.

Upvotes: 2

Views: 435

Answers (3)

ghiles ybeggazene
ghiles ybeggazene

Reputation: 275

affichage de deux attributs d'un tableau d'objet

Etat = [
        {  id: 1, name: 'Pression pneus', checked: false },
        {  id: 2, name: 'Direction', checked: false },
        {  id: 3, name: 'Eclairage', checked: false },
        {  id: 4, name: 'Kit anti-crevaison', checked: false }
    ];     

get  resultEtat() {
           return this.Etat.filter(item => item.checked).map(({id, name}) => { return {id, name}})
        };

Upvotes: 0

TheBigLignowski
TheBigLignowski

Reputation: 439

Here's a little something I wrote that helps maintain sanity while trying to debug using console.log synchronous console.log

just do 

import {betterConsole} from <path to betterConsole>
let console = betterConsole;

...now just use console.log like normal but the wrapper will be called instead. If you want to get the old, counter intuitive behaviour of console.log, just use console.lie (fair warning, I have not actually tested console.lie).

Upvotes: 1

DWilches
DWilches

Reputation: 23015

Google Chrome has an unexpected behaviour when it comes to the console.log function. When you do something like this:

console.log(this.data);

If data is too large, Chrome will collapse it, and will not print the current value at the moment the statement executes:

enter image description here

Chrome will resolve the data variable's value only when you click on the "expand" button. Notice that, when you expand your data, Chrome puts a blue info button next to it, if you hover it you'll see a message "Value below was evaluated just now" which means you are seeing the current value of the variable, not the value it had when you attempted to print it.

enter image description here

If you want to actually see the value a variable had when you attempted to print it you'll need to do this:

console.log(JSON.stringify(this.data));

Which converts your data to a string as it was at the moment of evaluation, thus bypassing Chrome's "evaluated just now" mechanism:

enter image description here

Also, notice the click event happens before the setter of ngModel. When the function clicked is executed none of your data has changed (all the checked = false) even for the first statement. But by the time you click on the expand icon, the setter of ngModel has already had time to execute, so you'll see the current value.

Upvotes: 4

Related Questions