angularjs - Why is my javascript object property disappearing?


Keywords:javascript 


Question: 

I am writing a simple AngularJS webapp, and in my Navigation service I have a list of menu items:

    class NavigationService {
        constructor($location) {
            this.$location = $location;

            this.menu = [{
                label: 'Overview',
                key: 'overview',
                children: [{
                    label: 'My Balances',
                    key: 'overview_balances',
                    click: () => {
                        this.$location.path('/balances');
                    }
                }]
            }, {
                label: 'Wallets',
                children: [{
                    label: 'Bitcoin',
                    key: 'wallets_bitcoin',
                    click: () => {
                        this.$location.path('/btc/balances');
                    }
                }, {
                    label: 'Ethereum',
                    key: 'wallets_ethereum',
                    click: () => {
                        this.$location.path('/eth/balances');
                    }
                }, {
                    label: 'Add...',
                    key: 'wallets_add',
                    click: () => {
                        this.$location.path('/wallets/add');
                    }
                }]
            }];
        }
        // some other code omitted
    }

    NavigationService.$inject = ['$location'];

    export default NavigationService;

However, when I put a breakpoint in the click function of one of the menu items, the key property is undefined, even though the label and other values are present:

how it looks

I am using Webpack to turn ES6 code into boring javascript, but inspecting the resulting bundle.js still shows the key property is there upon creation. Also, though the screenshot doesn't show it, the Overview key is still present -- it is only the keys of the children array of objects that are undefined. If they were being removed, why would they show up in the inspector at all?

I know key isn't a reserved word in JS, but is it being used differently in Angular? I can certainly pick a different name for the value, but I want to know what is going on. How can I follow that variable in memory and see the point where the key disappears?


1 Answer: 

I found the answer. What was weird was that the tabs weren't reacting the same way, and no matter what I changed the key too, it kept getting set to undefined. I realized that my usage of the variable was likely the culprit. Turns out I had = instead of == in my ng-class statement:

    <ul class="menu-list">
        <li ng-repeat="child in menu.children">
            <a ng-bind="child.label"
                ng-class="{
                    'is-active': child.id = ctrl.Navigation.current_menu.id
                }"
                ng-click="ctrl.Navigation.select_menu(child)"></a>
        </li>
    </ul>

Whenever I clicked on the menu item -- or whenever a digest would occur -- it would set the child.id variable to ctrl.Navigation.current_menu.id which would be undefined, I guess. Changing it to == fixes the problem.