путаница с hasOwnProperty

Question

Я написал ниже код и еще несколько, чтобы быстро создать прототип для трех экранного веб-приложения. Не планируете использовать его для производства. Проект почти закончен, но есть одна проблема, которая меня озадачивает. Я получаю сообщение об ошибке - Cannot read property 'first_name' of undefined, хотя сначала проверяется, имеет ли объект свойство, указанное как неопределенное. Реализация кода не является примером того, как следует обрабатывать такие вещи, но почему это не работает? Чтобы предотвратить контекст funkiness, я даже клонировал массив - возможно, ненужный. Что вызывает неопределенную ошибку?

$.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!'); 
     } 
    }); 

Просьба сообщить.

спасибо.

Answer 1

hasOwnProperty просто проверяет, имеет ли объект свойство под этим именем. Он не проверяет, что это за значение. Это значение может быть 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);

Это означает, что seats[i] может очень хорошо иметь passenger собственность, но это значение еще может быть undefined.

Там же проблема, что вы используете ternary operation during string concatenation. По существу, + имеет более высокий приоритет, чем ?:, что приводит к конкатенации произошедшей до условного оцениваются. Чтобы исправить это, оберните тройники в круглые скобки.

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>';