Ajax Jquery / JavaScript создает элементы HTML, когда данные больше 0 (ноль)

Question

У меня есть элемент HTML, который я заполняю элементами div & data с помощью JSON, возвращенного из сценария PHP. Данные постоянно обновляются, поэтому я использую 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 Solutions были бы хороши - ура!

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