Can someone please help me refactor this code? I am return HTML via JS and my function is way too lo-CodePudding

I was looking to shorten up this code if possible. I am making a TV show search app and the API I am using has some empty arrays in it. I was wondering if I can set some default parameters? I've been stuck on this for days! I know it's going to be an eye sore to read, but any help is much appreciated. Thank you for looking at my code.

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 && showTitle && showDesc && 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 && !showImg && !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
}

CodePudding user response：

Define the varying values up front, then write out the HTML string once and interpolate. Change the mapper function to:

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>
`;

CodePudding user response：

You can just normally render HTML and then change elements parameters via 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();

Let's say your variable showGenres == false

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

You can have content defined once in element variable and then change it dynamically :)

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