如何最好地使用基于服务器上json的javascript来呈现html？

Question

我的服务器发送json（请注意DISPLAY_CHECKBOX变量）

{"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}]}

我想遍历创建html的json。我的问题是如何最好地处理复选框周围的切换？即如何根据DISPLAY_CHECKBOX值显示或不显示复选框？

$.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);


});```

Answer 1

喜欢这个

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>