J'ai une simple requête ajax renvoyant des données, puis insérées dans un modèle de modèle. Je me demandais s'il était possible d'insérer une instruction 'if' dans le modèle?
Essentiellement, ajouter une autre ligne de code, si l'objet json a une 5ème couleur.
$.ajax({
url: 'http://localhost:8888/ColourCatchr%202/app/search.php'
}).done(function(results){
var res = jQuery.parseJSON(results);
console.log(res);
$.each(res,function(index,result){
$('.palettes').append(`
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">${result.name}</h3>
</div>
<div class="panel-body">
<div class="col-md-12 colors">
<div class="color" style=background-color:#${result['color 1']}><h6>${result['color 1']}</h6></div>
<div class="color" style=background-color:#${result['color 2']}><h6>${result['color 2']}</h6></div>
<div class="color" style=background-color:#${result['color 3']}><h6>${result['color 3']}</h6></div>
<div class="color" style=background-color:#${result['color 4']}><h6>${result['color 4']}</h6></div>
${if(result['color 5']){
<div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>
}
}
<div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>
<p>on hover change to translucent background and black text for ecah color</p>
</div>
</div>
<div class="panel-footer">
<a class="btn btn-info btn-lg" href="update.html?id=${result.id}">Edit</a>
<a class="btn btn-danger btn-lg">Delete</a>
</div>
</div>`
)
})
})
Vous devrez déplacer votre logique dans une fonction ou utiliser l'opérateur ternaire:
`${result['color 5'] ? 'color 5 exists!' : 'color 5 does not exist!'}`
Exemple supplémentaire basé sur un commentaire:
`${result['color 5'] ?
`<div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>`
: ''}`
tu peux aussi faire ça
`${result['color 5'] && `Color 5 exists`}`
Pour utiliser une variable en utilisant ternary operator
utilisez nested template litral
comme ceci:
let var1 = 6
let var2 = 8
console.log(`${ `${var1 > var2 ? var1 + ` (var1) `: var2 + ` (var2) `}` } is greater`)