Блог

Я хотел сократить этот код, если это возможно. Я создаю приложение для поиска телешоу, и в API, который я использую, есть несколько пустых массивов. Мне было интересно, могу ли я установить некоторые параметры по умолчанию? Я застрял на этом несколько дней! Я знаю, что читать это будет больно глазам, но я очень ценю любую помощь. Спасибо, что посмотрели мой код.

 const imgContainer = document.querySelector('.img-container')
const clearBtn = document.querySelector('.clear-btn')

searchForm.addEventListener('submit', function (e) {
    e.preventDefault()
    fetchApi()
})

const fetchApi = async () => {
    const userInput = searchForm.elements.query.value
    const config = { params: { q: userInput } }
    const fetch = await axios.get('https://api.tvmaze.com/search/shows', config)
    showDetails(fetch.data)
}

const showDetails = (request) => {
    const reqMap = request.map(function (shows) {
        const showImg = shows.show.image
        const showTitle = shows.show.name
        const showDesc = shows.show.summary
        const showGenres = shows.show.genres[0]
        if (showImg amp;amp; showTitle amp;amp; showDesc amp;amp; showGenres) {
            let showImgMed = shows.show.image.medium
            return `<div class="show-details">
                <h1>${showTitle}</h1>
                <img class="stock-img" src="${showImgMed}" alt="">
                    <p class="show-desc">Description: ${showDesc}</p>
                    <p class="show-genre">Genre: ${showGenres}</p>
        </div>`
        } else if (!showGenres amp;amp; !showImg amp;amp; !showDesc) {
            return `<div class="show-details">
                <h1>${showTitle}</h1>
                <img class="stock-img" src="https://www.westernheights.k12.ok.us/wp-content/uploads/2020/01/No-Photo-Available.jpg" alt="">
                    <p class="show-desc">Description: N/A</p>
                    <p class="show-genre">Genre: N/A</p>
                    
        </div>`
        } else if (!showImg) {
            return `<div class="show-details">
                <h1>${showTitle}</h1>
                <img class="stock-img" src="https://www.westernheights.k12.ok.us/wp-content/uploads/2020/01/No-Photo-Available.jpg" alt="">
                    <p class="show-desc">Description: ${showDesc}</p>
                    <p class="show-genre">Genre: ${showGenres}</p>
                    
        </div>`
        } else if (!showDesc) {
            let showImgMed = shows.show.image.medium
            return `<div class="show-details">
                <h1>${showTitle}</h1>
                <img class="stock-img" src="${showImgMed}" alt="">
                    <p class="show-desc">Description: N/A</p>
                    <p class="show-genre">Genre: ${showGenres}</p>
                    
        </div>`
        } else if (!showGenres) {
            let showImgMed = shows.show.image.medium
            return `<div class="show-details">
                <h1>${showTitle}</h1>
                <img class="stock-img" src="${showImgMed}" alt="">
                    <p class="show-desc">Description: ${showDesc}</p>
                    <p class="show-genre">Genre: N/A</p>
                    
        </div>`
        }
    }).join('')
    imgContainer.innerHTML = reqMap
}
 

Определите переменные значения заранее, затем один раз выпишите HTML-строку и интерполируйте. Измените функцию сопоставления на:

 const {
    image,
    name,
    summary = 'N/A',
    genres,
} = shows.show;
const imageSrc = image ? image.medium : 'https://www.westernheights.k12.ok.us/wp-content/uploads/2020/01/No-Photo-Available.jpg';
const showGenres = genres[0] || 'N/A';
return `
    <div class="show-details">
        <h1>${name}</h1>
        <img class="stock-img" src="${imageSrc}" alt="">
        <p class="show-desc">Description: ${summary}</p>
        <p class="show-genre">Genre: ${showGenres}</p>
    </div>
`;
 

Вы можете просто нормально отображать HTML, а затем изменять параметры элементов с помощью javascript.

 var element = document.createElement('div');
element.innerHTML = `<div class="show-details">
                <h1>aa</h1>
                <img class="stock-img" src="aa" alt="">
                    <p class="show-desc">Description: aa</p>
                    <p class="show-genre">Genre: aa</p>
        </div>`.trim();
 

Допустим, ваша переменная showGenres == false

 if(!showGenres) {
   element.querySelector("p.show-desc").textContent = "Genre: N/A"
}
 

Вы можете задать содержимое один раз в переменной элемента, а затем динамически изменять его 🙂

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute