检查 null 或 jQuery 中的未定义值

Question

I'm really getting crazy with this issue...and even I've read tons of topics I can't figure it out...so sorry in advance for the already discussed topic but I need a specific help.

What I need to do: check if a variable is not empty; in this case print a badge.

The remote framework is Codeigniter 3, I'm sure about the code, the server script return both an empty variable (infos) and an undefined variable (crid) in JSON format.

The literal template in Jquery to print the badges is the following:

$(`
    
    <p class="badges">
    ${(() => {
      if (data.pictures[i].status == '1'){
        return `<span class="badge badge-success">Published</span>`
      } else {
        return `<span class="badge badge-warning">Hidden</span>`
      }
    })()}
    ${(() => {
        if (data.pictures[i].infos){
            console.log('Infos are ' + data.pictures[i].infos);
            return `<span class="badge badge-info">Info</span>`
        }
    })()}
    ${(() => {
        if (typeof data.pictures[i].crid !== 'undefined' && data.pictures[i].crid !== null){
            return `<span class="badge badge-primary">Credit</span>`
        }
    })()}
    </p>
`)

The first conditional code works fine ( data.pictures[i].status), the second and third ones are getting me crazy. The second conditional code ( data.pictures[i].infos ) return undefined in browser...the variable doesn't exists in JSON code returned by the server script. The third conditional code ( data.pictures[i].crid ) return undefined in browser... the variable in JSON data exists but is empty.

I want to get rid of undefined in browser if the variable is empty or not exists....in case it has a value I want to print the badge.

Of course I did endless test replacing the conditional code...but sometimes I get the badge even if the JSON variable is empty...otherwise I get undefined.

Thanks a lot for any help or hint

Answer 1

Your functions are just an if and return nothing if they do not go into the if. So that means it returns undefined .

You would need to return '' from the functions.

${(() => {
    if (data.pictures[i].infos){
        console.log('Infos are ' + data.pictures[i].infos);
        return `<span class="badge badge-info">Info</span>`
    }
    return '';
})()}

Personally I would just use a ternary

const status = data.pictures[i].status == '1' ? 
    '<span class="badge badge-success">Published</span>' : 
    '<span class="badge badge-warning">Hidden</span>'
const info = data.pictures[i].infos ? 
    '<span class="badge badge-info">Info</span>' : ''
const crid = (typeof data.pictures[i].crid !== 'undefined' && data.pictures[i].crid !== null) ? 
    '<span class="badge badge-primary">Credit</span>' : ''

$(`<p class="badges">
    ${status}
    ${info}
    ${crid}
</p>`)