confusion with hasOwnProperty

Question

I wrote the below code, and some more, to quickly build a prototype for a 3 screen web application. Not planning to use it for production. The project is almost finished, but there is one issue that is perplexing me. I get an error - Cannot read property 'first_name' of undefined, even though there is a check first whether the object has the property reported as undefined. Realize the code is not an example of how such things should be handled, but why does it not work? To prevent context funkiness, I even clone the array - probably unnecessary. What causes the undefined error?

    $.ajax({
        url: '/api/v1/departures/' + routeID + '/',
        method: 'GET',
        headers: {
            'Authorization': 'Token '+ owner_token]
        },
        contentType:'application/json',
        success: function(departures) {
            console.log('departures: ' + JSON.stringify(departures));
            if ( departures && ( 0 < departures.length)) {
                var template = '';
                for ( var j = 0; j < departures.length; j++) {
                    if (departures[j].route == routeID) {
                        var seats = (departures[j].seats).slice(0);
                        for ( var i = 0; i < seats.length; i++) {
                            template  += '<div class="right-seat" data-id="' + seats[i].seat + '">' +
                                 '<div class="right-seat-place">SEAT ' + seats[i].seat + '</div>' +
                                 '<div class="right-seat-name">' +
                                 seats[i].hasOwnProperty('passenger') ? seats[i].passenger.first_name + ' ' + seats[i].passenger.last_name : '' +
                                 '</div>' +
                                 '<div class="right-seat-reserved"><i class="glyphicon glyphicon-check"></i>&nbsp;' +
                                 seats[i].hasOwnProperty('passenger') ? 'Reserved' : 'Available'  +
                                 '</div>' +
                                 '</div>';
                        }
                    }
                }
                $('div.right-top-controls').after(template);
            }
        },
        error: function() {
            alert('error!');
        }
    });

Please advise.

Thank you.

passenger might not have a property first_name. There is no check for this. — Jonas Köritz, Jun 06 '16 at 19:27
that's true, but what does it have to do with either my question or the error? — Moshe Shmukler, Jun 06 '16 at 19:29
Basically it seems your sear does have a property named passenger, but that is undefined, such as seat = {passenger:undefined}; seat.hasOwnProperty('passenger') — juvian, Jun 06 '16 at 19:30
use `seats[i].passenger ? seats[i].passenger.first_name + ' ' + seats[i].passenger.last_name : ''` which will be false for `undefined` — BenG, Jun 06 '16 at 19:32
@BenG that's a very good point, but the result is still the same - `Type Error: Cannot read property 'first_name' of undefined` — Moshe Shmukler, Jun 06 '16 at 19:36
seats[i].passenger will check for null not undefined, you will need to use if typeof seats[i].passenger !== "undefined" — Alex C, Jun 06 '16 at 19:45

score 2 · Accepted Answer · edited Jul 05 '22 at 23:21

2

hasOwnProperty just checks if an object has a property by that name. It doesn't check what that value is. That value could be undefined.

// Doesn't have the property and accessing it returns undefined
var A = {};
console.log(A.hasOwnProperty('prop'));
console.log(A.prop);


// Has the property and the value is not undefined
var B = {
  prop: 1
};
console.log(B.hasOwnProperty('prop'));
console.log(B.prop);

// Has the property AND it's value is undefined
var C = {
  prop: undefined
};
console.log(C.hasOwnProperty('prop'));
console.log(C.prop);

This means that seats[i] may very well have a passenger property but it's value could still be undefined.

There's also the problem that you're using a ternary operation during string concatenation. Essentially, + has higher precedence than ?: which results in the concatenation occurring before the conditional is evaluated. To fix this, wrap your ternaries in parentheses.

template  += '<div class="right-seat" data-id="' + seats[i].seat + '">' +
               '<div class="right-seat-place">SEAT ' + seats[i].seat + '</div>' +
               '<div class="right-seat-name">' +
                 (seats[i].hasOwnProperty('passenger') ? seats[i].passenger.first_name + ' ' + seats[i].passenger.last_name : '') +
               '</div>' +
               '<div class="right-seat-reserved"><i class="glyphicon glyphicon-check"></i>&nbsp;' +
                 (seats[i].hasOwnProperty('passenger') ? 'Reserved' : 'Available')  +
               '</div>' +
             '</div>';

edited Jul 05 '22 at 23:21

Karl Knechtel

62,466
11
102
153

answered Jun 06 '16 at 19:30

Mike Cluck

31,869
13
80
91

makes sense. in my situation, it is unfortunately not the case. – Moshe Shmukler Jun 06 '16 at 19:32
@MosheShmukler Perhaps you should try `console.log(seats[i].passenger)` because the only way you can get that error is if that value is `undefined`. And the only way it will pass the `hasOwnProperty` check is if the object has a property by that name but with a value of `undefined`. – Mike Cluck Jun 06 '16 at 19:34
1

@MosheShmukler *" it is unfortunately not the case."* So what is the case? – epascarello Jun 06 '16 at 19:40
I did dump my array to the console. It looks like: [{"seat":"1"},{"seat":"2"},{"seat":"3"},{"seat":"4"}] – Moshe Shmukler Jun 06 '16 at 19:46
@MosheShmukler See my edit. I believe I found your problem. – Mike Cluck Jun 06 '16 at 19:48
@MikeC adding brackets around the ternary does the trick. thank you. – Moshe Shmukler Jun 06 '16 at 20:16

confusion with hasOwnProperty

1 Answers1

Linked

Related