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

我有一个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解决方案都将非常棒-干杯！

最佳答案

一个简单的条件呢：

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

关于javascript - 当数据大于0(零)时，Ajax Jquery/JavaScript创建HTML元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55251810/