web-dev-qa-db-fra.com

Insertion d'une instruction if dans le modèle littéral ES6

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>`
    )
})

})
javascriptjqueryecmascript-6
9
Chris Hurst

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>` 
: ''}`
15
Andy Gaskell

tu peux aussi faire ça 

`${result['color 5'] && `Color 5 exists`}`
5
etoxin

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

0
BlackBeard