Don't show element if element is null, in a html template-CodePudding

this is my first programming project so I'm a real noob in java script and in most other languages.

Context: I have a JavaScript that reads a JSON file and duplicate a HTML templates with all item information inside for each item. Each generated template contain a name, a description an icon, and, (for now) up to two urls as forms of small logos.

With the JavaScript code below, My HTML card list correctly appears, but both url logos appears too on every element, even if the url is null.

My goal is to show only url logos that are not null.

I've tried adding an if statement(as shown in 3rd code sample) but its even worst and link can't be open anymore.

I feel like the answer is easy but I can't find a way to solve that anywhere.

Thanks for future answers

JSON example:

[
     {
        "name": "Name1",
        "description": "Description1",
        "icon": "Icon1",
        "modrinthUrl": "url1",
        "curseforgeUrl": "url2"
    },
    {
        "name": "Name2",
        "description": "Description2",
        "icon": "Icon2",
        "modrinthUrl": null,
        "curseforgeUrl": "url3"
    }
]

JavaScript :

fetch('./Database/modsData.json')
.then(response => response.json())
.then(modsArray => renderAllMods(modsArray))
function renderAllMods(modsArray){
    modsArray.forEach(mod => renderOneMod(mod))
}
const findDiv = document.querySelector("#mod-container")
function renderOneMod(mod){
    const newElement = document.createElement("div")
    newElement.innerHTML = `
        <div id="mod" >
            <img id="modimg"  src="${mod.icon}">
            <div >
                <h2>${mod.name}</h2>
                <br>
                <p>${mod.description}</p>
            </div>
            <div >
                <a href="${mod.modrinthurl}"><img src="images/ModrinthLogo.png"></a>
                <a href="${mod.curseforgeUrl}"><img src="images/CurseforgeLogo.png"></a>
            </div>
        </div>
    `
    findDiv.append(newElement)
}

JavaScript with unsuccessful try;

function renderOneMod(mod){
        if(mod.modrinthUrl = null){
            modrinth = "<!-- no modrinth page -->"
        } else {
            modrinth = '<a href="${mod.modrinthurl}"><img src="images/ModrinthLogo.png"></a>'
        }
        if(mod.curseforgeUrl = null){
            curseforge = "<!-- no curseforge page -->"
        } else {
            curseforge = '<a href="${mod.curseforgeUrl}"><img src="images/CurseforgeLogo.png"></a>'
        }
        const newElement = document.createElement("div")
        newElement.innerHTML = `
            <div id="mod" >
                <img id="modimg"  src="${mod.icon}">
                <div >
                    <h2>${mod.name}</h2>
                    <br>
                    <p>${mod.description}</p>
                </div>
                <div >
                    ${modrinth}
                    ${curseforge}
                </div>
            </div>
        `

CodePudding user response：

You should change the renderOneMod function to something like this

function renderOneMod(mod){
    const newElement = document.createElement("div")
    newElement.innerHTML = `
        <div id="mod" >
            <img id="modimg"  src="${mod.icon}">
            <div >
                <h2>${mod.name}</h2>
                <br>
                <p>${mod.description}</p>
            </div>
            <div >
                ${mod.modrinthurl ? `<a href="${mod.modrinthurl}"><img src="images/ModrinthLogo.png"></a>` : ''}
                ${mod.curseforgeUrl ? `<a href="${mod.curseforgeUrl}"><img src="images/CurseforgeLogo.png"></a>` : ''}
            </div>
        </div>
    `
    findDiv.append(newElement)
}