Как вывести ошибку с недостающим свойством в объекте с помощью try catch?
Помогите, пожалуйста разобраться почему не работает catch и вывести ошибку с недостающим свойством:
const flowers = [{
author: "Белі Свім",
name: "Троянда",
price: 60
},
{
author: "Джеймс Лоррі",
name: "Тюльпан"
},
{
name: "Нарцис",
price: 45
}
]
let div = document.createElement('div');
div.id = 'root';
document.body.append(div);
function flowersList(arr) {
let ul = document.createElement('ul');
arr.forEach(elems => {
let li = document.createElement('li');
li.textContent = `author: ${elems.author}; name: ${elems.name}; price: ${elems.price}`;
try {
//debugger;
if (elems.author && elems.name && elems.price) {
ul.append(li);
} else {
throw new Error();
}
} catch (e) {
console.log(e);
//console.log('work catch');
}
});
return ul;
}
let flowersUl = flowersList(flowers);
document.getElementById('root').append(flowersUl);
Ответы (2 шт):
Проблема возникает из-за того, что внутри блока try-catch выбрасывается ошибка, когда какое-то из свойств объекта отсутствует, но не указывается текст ошибки, который будет передан в блок catch.
Для того чтобы вывести ошибку с недостающим свойством, можно в блоке catch создать новый объект ошибки и добавить в его свойство message текст ошибки, который вы можете определить вручную, указав отсутствующее свойство.
function flowersList(arr) {
let ul = document.createElement('ul');
arr.forEach(elems => {
let li = document.createElement('li');
li.textContent = `author: ${elems.author}; name: ${elems.name}; price: ${elems.price}`;
try {
if (elems.author && elems.name && elems.price) {
ul.append(li);
} else {
throw new Error(`Отсутствует свойство: ${!elems.author ? 'author' : !elems.name ? 'name' : 'price'}`);
}
} catch (e) {
console.log(e.message);
}
});
return ul;
}
В этом коде, если одно из свойств отсутствует, вы создадите новый объект ошибки с текстом, указывающим недостающее свойство, и передадите его в блок catch для вывода.
Например, если объект цветов flowers не содержит свойства author, то вы получите следующее сообщение об ошибке: Отсутствует свойство: author.
Предложу еще один вариант решения. Лично я люблю универсальность в подходе, поэтому предлагаю использовать Proxy объект который может предоставить информацию о том какое свойство читается и вовремя это обработать. Главный плюс этого метода то что его можно переносить из проекта в проект практически не меняя либо меняя под конкретные нужды но не нагружая при этом try-catch основную логику программы. Так же я заметил, что заполнения списка не происходило поэтому пофиксил этот момент в коде. Для наглядности я не вызываю ошибку а делаю вывод в консоль, для вызова ошибки нужно лишь расскоментировать соответсвующую строку.
const flowers = [{
author: "Белі Свім",
name: "Троянда",
price: 60
},
{
author: "Джеймс Лоррі",
name: "Тюльпан"
},
{
name: "Нарцис",
price: 45
}
]
let div = document.createElement('div');
div.id = 'root';
document.body.append(div);
function getProxy(obj){
return new Proxy(obj, {
get(target, prop) {
if (prop in target) {
return target[prop]
} else {
console.log(`Нет свойства: ${prop} в объекте ${JSON.stringify(target)}`)
//throw new Error(`Нет свойства: ${prop} в объекте ${JSON.stringify(target)}`)
return undefined
}
}
})
}
function flowersList(arr) {
let ul = document.createElement('ul');
arr.forEach(elem => {
const prx = getProxy(elem) // проксируем объект и далее обращаемся через прокси
let li = document.createElement('li');
li.textContent = `author: ${prx.author}; name: ${prx.name}; price: ${prx.price}`;
ul.appendChild(li) // <---- добавление в список
});
return ul;
}
document.querySelector('#root').appendChild(flowersList(flowers))