Erste undefiniert Eigenschaft von Ajax Antwort verschachteltes Objekt

Question

Ich habe folgende Ajax Antwort von der API:

{ 
    "data": [ 
    { 
     "id": 16, 
     "sender_id": 1, 
     "text": "Test", 
     "created_at": "2017-07-21 15:42:08", 
     "updated_at": "2017-07-21 15:42:08", 
     "sender": { 
     "data": { 
      "id": 1, 
      "name": "John Doe", 
      "email": "john@doe.co", 
      "mobile": "+1875446799976", 
      "photo_url": "https://example.co/storage/profiles/0H6Rkwsrlns0R1PY03Mta2qIhdPhV7N19jaagH3m.jpeg", 
      "first_login": 0, 
      "uses_two_factor_auth": false, 
      "two_factor_reset_code": null, 
      "current_team_id": 1, 
      "stripe_id": null, 
      "current_billing_plan": null, 
      "billing_state": null, 
      "vat_id": null, 
      "trial_ends_at": "2017-06-27 10:06:05", 
      "last_read_announcements_at": "2017-06-27 10:06:05", 
      "created_at": "2017-06-27 10:06:05", 
      "updated_at": "2017-06-28 10:40:07", 
      "tax_rate": 0 
     } 
     }, 
     "buildings": { 
     "data": [ 
      { 
      "id": 4, 
      "team_id": 1, 
      "name": "Oasis", 
      "created_at": "2017-06-30 13:15:30", 
      "updated_at": "2017-06-30 13:15:30", 
      "pivot": { 
       "sending_id": 16, 
       "building_id": 4 
      } 
      } 
     ] 
     }, 
     "messages": { 
     "data": [ 
      { 
      "id": 316, 
      "sending_id": 16, 
      "recipient_id": 42, 
      "provider_id": "0B0000006A1ABFEF", 
      "info": null, 
      "status": "delivered", 
      "price": "0.07500000", 
      "error_text": null, 
      "created_at": "2017-07-21 15:42:08", 
      "updated_at": "2017-07-21 15:42:21", 
      "recipient": { 
       "id": 42, 
       "name": "John Doe", 
       "email": "john@doe.co", 
       "mobile": "198765456789", 
       "types": [ 
       "Inhabitant" 
       ], 
       "building_id": 4, 
       "created_at": "2017-07-01 07:21:52", 
       "updated_at": "2017-07-01 07:21:52", 
       "deleted_at": null 
      } 
      } 
     ] 
     } 
    }, 
    ... 
    } 

Aber wenn ich versuche, wie die folgenden Empfängernamen anzuzeigen:

<tr v-for="sending in sendings"> 
    <td>{{ sending.created_at | moment }}</td> 
    <td><div style="width: 300px">{{ sending.text }}</div></td> 
    <td> 
     <div v-for="building in sending.buildings.data" v-if="sending.buildings.data"> 
      {{ building.name }} 
     </div> 
    </td> 
    <td> 
     <ul> 
      <li v-for="message in sending.messages.data" v-if="sending.messages.data"> 
       {{ message.recipient.name }} 
      </li> 
     </ul> 
    </td> 
</tr> 

ich das bekommen Fehler in der Konsole und keine Zeile wird überhaupt angezeigt: TypeError: Kann Eigenschaft 'Name' von undefined nicht lesen

Hier ist der API-Aufruf & Rückruf: Dieses

getSendings() { 
    axios.get('/api/v1/sendings', { 
      params: { 
       search: (this.searchSendings ? this.searchSendings.text : ''), 
       limit: this.sendings ? (this.sendings.length + 10) : 10, 
       building_id: this.selectedBuildingsIds 
      } 
     }) 
     .then(response => { 
      if (response.data.data.length) { 
       this.sendings = response.data.data; 

       if (response.data.meta.pagination.total_pages == 1) { 
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete'); 
       } else { 
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); 
       } 
      } else { 
       this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete'); 
      } 
     }); 
}, 

ist Daten:

data() { 
    return { 
     sendings: null, 
     selectedBuildings: null, 
     selectedBuildingsIds: [], 
     searchSendings: { 
      text: null 
     }, 
    }; 
}, 

Es ist seltsam, weil die Anzeige Name des Gebäudes funktioniert gut, der einzige Unterschied besteht darin, Empfänger ist eine Ebene tiefer ..

Irgendwelche Gedanken?

Answer 1

Was ich erwarte, verursacht den Fehler ist für einige einzelne message, message.recipient ist undefined. In dem Fall, dass ein recipient nicht definiert ist, wenn Sie die name Eigenschaft des Empfängers zuzugreifen versuchen, wie Sie hier tun,

{{message.recipient.name}} 

Javascript wirft einen Fehler, weil Sie jetzt versuchen, den Namen Eigenschaft nicht definiert zu erhalten.

Sie können sich mit einem Wächter gegen diesen Fehler schützen.

{{message.recipient && message.recipient.name}}