CODEWITHSUNDEEP
jqueryjsonswitch-statement
happysailingdude
happysailingdude

Reputation: 305

How best to render html using javascript based on json from server?

My server sends json (note the DISPLAY_CHECKBOX var)

{"MY_DATA":[{"ID":270336,"STATUS":"live","STATUS_DISPLAY_ORDER":6,"DISPLAY_CHECKBOX":0},{"ID":224808,"STATUS":"archived","STATUS_DISPLAY_ORDER":1,"DISPLAY_CHECKBOX":1},{"ID":139066,"STATUS":"tbd","STATUS_DISPLAY_ORDER":2,"DISPLAY_CHECKBOX":0}]}

I want to loop over the json creating html. My question is how best to handle the switch around the checkbox? ie How to make the checkbox display or not depending on the the DISPLAY_CHECKBOX value?

$.each(data.MY_DATA, function(index){

    var myhtml = '<div class="panel panel-default">\
        <div class="panel-heading">\
            if(this.DISPLAY_CHECKBOX == 1) {<input type="checkbox"> }\
        </div>\
        <div class="panel-body">'+this.STATUS+'</div>
    </div>';


    $('#container').append(myhtml);


});```

Upvotes: 0

Views: 35

Answers (1)

mplungjan
mplungjan

Reputation: 178350

Like this - using a template literal and a ternary

myHtml.push(`<div class="panel panel-default">
    <div class="panel-heading">
        ${ this.DISPLAY_CHECKBOX ? `<input type="checkbox">` : "" }
    </div>
    <div class="panel-body">${this.STATUS}</div>
</div>`);


const data = {
  "MY_DATA": [{
    "ID": 270336,
    "STATUS": "live",
    "STATUS_DISPLAY_ORDER": 6,
    "DISPLAY_CHECKBOX": 0
  }, {
    "ID": 224808,
    "STATUS": "archived",
    "STATUS_DISPLAY_ORDER": 1,
    "DISPLAY_CHECKBOX": 1
  }, {
    "ID": 139066,
    "STATUS": "tbd",
    "STATUS_DISPLAY_ORDER": 2,
    "DISPLAY_CHECKBOX": 0
  }]
}
const myHtml = [];
$.each(data.MY_DATA, function(index) {

  myHtml.push(`<div class="panel panel-default">
        <div class="panel-heading">
            ${ this.DISPLAY_CHECKBOX ? `<input type="checkbox">` : "" }
        </div>
        <div class="panel-body">${this.STATUS}</div>
    </div>`);
})

$('#container').html(myHtml.join(""));
.panel { border: 1px solid black; width:200px; margin:10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

For IE11 and under

myHtml.push('<div class="panel panel-default">'+
    '<div class="panel-heading">'+
        (this.DISPLAY_CHECKBOX ? '<input type="checkbox">' : "") +
    '</div>' + 
    '<div class="panel-body">'+this.STATUS+'</div>'+
'</div>');


const data = {
  "MY_DATA": [{
    "ID": 270336,
    "STATUS": "live",
    "STATUS_DISPLAY_ORDER": 6,
    "DISPLAY_CHECKBOX": 0
  }, {
    "ID": 224808,
    "STATUS": "archived",
    "STATUS_DISPLAY_ORDER": 1,
    "DISPLAY_CHECKBOX": 1
  }, {
    "ID": 139066,
    "STATUS": "tbd",
    "STATUS_DISPLAY_ORDER": 2,
    "DISPLAY_CHECKBOX": 0
  }]
}
const myHtml = [];
$.each(data.MY_DATA, function(index) {

  myHtml.push('<div class="panel panel-default">'+
        '<div class="panel-heading">'+
            (this.DISPLAY_CHECKBOX ? '<input type="checkbox">' : "") +
        '</div>' + 
        '<div class="panel-body">'+this.STATUS+'</div>'+
   '</div>');
})

$('#container').html(myHtml.join(""));
.panel { border: 1px solid black; width:200px; margin:10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

Upvotes: 1

Related Questions