Как обрабатывать null на клиенте?

Question

[hackuun]

Иногда бывает что с API прилетает null, а в коде используется что-то типо такого

<img :src="`static/images/cdn/800x600-${article.image.url.jpegpng}`" :alt="article.image.alt" :title="article.image.title">

И когда из API поступает article.image: null мне кидает ошибку undefined.

Что делать в таких случаях? Что делать с этим объектом article.image, если поступает null?

Comments

[Алексей Ярков]

Что делать в таких случаях?

Мы с бэкендерами ругаемся в таких случаях и просим сохранять типы. Если должен быть объект, то надо присылать {}, если массив, то [] и т. п.

[hackuun]

Алексей Ярков, к сожалению, не могу хранить в БД пустой объект, потому что я ипользую популяции в Монго в этом случае и значение должно быть уникально и валидироватся как ObjectID. Т.е. вообще там хранится ObjectID, но иногда хочу хранить отсутствие значения, поэтому кладу туда null. Это не правильно?

[Алексей Ярков]

hackuun, я ж хз что у вас правильно )) ИМХО если я жду строку с бэкенда, то и хочу получить строку, а не null. Это мой бэкенд, я ему доверяю. Почему я должен пилить проверки на каждый чих?

[hackuun]

Алексей Ярков, я что спрашиваю что у меня правильно? Вопрос не понятен что-ли? ПРи чем тут доверие?

[Алексей Ярков]

hackuun, ответ не понятен что-ли?

Как обрабатывать null на клиенте?

Да как удобно. Мне удобно фиксить данные на бэкенде, чтобы они приходили в нужом формате.
Кому-то удобно писать obj && obj.field && obj.field.nested.
Ну нет единого православного способа же.

[hackuun]

Алексей Ярков, хм, ок, а если на бекенде, то как править? Там же не просто строка, а объект с несколькоми значениями разной вложенности. На что заменять null?

[Алексей Ярков]

hackuun, всегда можно обрабатывать ответ перед отправкой на фронт с помощью функции, которая приведет к нужному виду данные.
Элементарный JSON.parse с функцией реплэйсером, которая заменит null на что-то ожидаемое. Это уже от ситуации зависит.

[Алексей Ярков]

hackuun, типа этого
https://jsfiddle.net/yarkov_aleksei/Lva1ye3h/

[hackuun]

Алексей Ярков, спс, попробую применить нечто подобное

Answer 1

[Александр Пашкевич]

Вроде Vue? Если ошибся - исправьте)

<img v-if="article && article.image" :src="`static/images/cdn/800x600-${article.image.url.jpegpng}`" :alt="article.image.alt" :title="article.image.title">

Можно так. Можно прямо в src добавить унарный оператор на проверку.

Comments

[hackuun]

Используется не только в шаблоне

[Александр Пашкевич]

hackuun, тогда можно через вотчер:

export default {
   watch:{
      article(newVal){
         if(!newVal.image) this.article.image = "DEFAULT IMAGE";
      }
   }
}