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

【问题标题】：How best to render html using javascript based on json from server?如何最好地使用基于来自服务器的 json 的 javascript 呈现 html？
【发布时间】：2020-09-05 10:46:26
【问题描述】：

我的服务器发送 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);


});```

【问题讨论】：

标签： jquery json switch-statement

【解决方案1】：

像这样 - 使用 template literal 和三元组

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>

IE11及以下

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>

【讨论】：

哦哇——非常感谢！也很高兴看到我不必再逃避换行符了 - 请问这是为什么，它与 push() 有关吗？
与`` developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 无关 - 如果您需要 IE 支持，您可能希望保留您的连接
我确实需要 IE 支持（唉）——你说我会做些什么来确保它在 IE 中工作？（非常感谢您的帮助）
啊，我明白了 - 好的，非常感谢，非常感谢您的帮助