@00111111

Как обойти ошибку «Cannot read property '0' of null» при обращении к нескольким пустым свойствам объекта?

Получаю данные с сервера в виде массива объектов и через v-for перебираю массив в
<li v-for="item of data.items" :key="item.id">
      <a class="catalog__pic" href="#">
        <img
          :src="item.colors[0].gallery[0].file.url"
          :alt="item.title"
        />
      </a>
      <h3 class="catalog__title">
        <a href="#">
          {{ item.title }}
        </a>
      </h3>
    </li>

мне нужно получить значение свойства (например свойство -"url") каждого из item, которое находится по такому пути:
item.colors[0].gallery[0].file.url

И Проблема заключается в том, что некоторые объекты item могут не иметь свойство colors либо свойство имеется но оно пустое - null, либо же может отсутствовать gallery, которое аналогично может существовать но иметь значение null. Тем самым, логично, что получаю ошибку из вопроса.

Возможно ли в данном обращении к свойству url item.colors[0].gallery[0].file.url проверить существование так, что если хотя бы одно из свойств не существует- то ошибку не получать (более лучшим способом), потому. что
На данный момент реализовал так, написав в methods:
methods: {
check(item) {
if(item.colors && item.colors[0] && item.colors[0].gallery && item.colors[0].gallery[0] ){
return item.colors[0].gallery[0].file.url
}
return '';
}
}


Работает, так проверяем каждое отдельное свойство, но это выглядит как-то ужасно.
И в template передаю каждый item для проверки в метод check:

<template>
<li v-for="item of data.items" :key="item.id">
      <a class="catalog__pic" href="#">
        <img
          :src="check(item)"
          :alt="item.title"
        />
      </a>
      <h3 class="catalog__title">
        <a href="#">
          {{ item.title }}
        </a>
      </h3>
    </li>
<template>


Если таких свойств будет несколько (не только до данного url изображения) до которых нужно добраться, то каждое из них нужно в условии "раскладывать" и каждое последовательно так проверять.. Или есть более адекватный способ?)
  • Вопрос задан
  • 453 просмотра
Решения вопроса 1
bingo347
@bingo347
Crazy on performance...
https://developer.mozilla.org/ru/docs/Web/JavaScri...
https://developer.mozilla.org/ru/docs/Web/JavaScri...

Но это из стандарта 2020 года, для поддержки более старых браузеров понадобится babel + preset-env
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы