javascript - 当数据大于 0(零)时，Ajax Jquery/JavaScript 创建 HTML 元素

Question

我有一个 HTML 元素，我使用 div 和数据以及从 PHP 脚本返回的 JSON 填充该元素。数据不断更新，所以我使用 Eventsouce (sse)。

<div class="row state-overview" id="statusCount"> </div>

let fsource;
function getStatus() {
    if (typeof(EventSource) !== "undefined") {
        try {
            fsource.removeEventListener("status", stream, false);
        } catch (ex) {
        }
        fsource = new EventSource("-PHP FILE-");
        fsource.addEventListener("status", stream, false);
    } else {
        console.log("Oh no");
    }
}
function stream(e) {
    let data = JSON.parse(e.data);
    let html = '';
    $.each(data, function (key, value) {
        html += '<div class="col-lg-2 panel ' + key + ' ">';
        html += '<p>' + key + '</p>';
        html += '<label>' + value + '</label>';
        html += '</div>';
    });
     $('#statusCount').html(html);
}
getStatus();

这工作得很好，但是，我试图隐藏/不显示值 = 0 的元素。

JSON 示例如下所示:

event: status
data: {"Online": 2, "Stopped": 3, "Alarm": 0, "Offline": 0}

不幸的是，我无法更改 PHP 来操纵返回的数据，所以任何 JavaScript 或 Jquery 解决方案都会很棒 - 干杯!

Answer 1

一个简单的条件怎么样:

$.each(data, function (key, value) {

  // if value IS more than zero, add some html
  if(value>0){
    html += '<div class="col-lg-2 panel ' + key + ' ">';
    html += '<p>' + key + '</p>';
    html += '<label>' + value + '</label>';
    html += '</div>';
  }
});