基于Json Value的显示图标

Question

我想更改基于JSON数组值显示的图标。根据JSON文件的状态，一个图标应在表的DOM HTML中显示。

目前期望什么：HTML DOM中有两个按钮。根据值显示仅一个按钮。

例如，如果状态为活动，则显示“活动”按钮；如果状态为非活动，则显示“活动”按钮。

我还尝试了if循环，但没有用。我尝试过foreach循环显示特定按钮的图标，但同时显示了两个图标。

请在下面查看我的代码并为我提供指导

$(document).ready(function() {
  $.getJSON("http://192.168.1.211:3000/facility/", function(results) {

    var buildingtitle1 = '';
    var building = results.length;

    var statusType = {
      "active": "Publish",
      "inactive": "Delist",
    };
    for (i = 0; i <= building - 1; i++) {
      buildingtitle1 += '<tr class="delete_building">' +
        '<td>' + results[i].facilityid + '</td>' +
        '<td><button  class="btn btn-light buildingname _id" type="button" value="' + results[i]._id + '">' + results[i].name + '</button></td>' +
        '<td><button   class="btn btn-light buildingname City" type="button" value="' + results[i].address.city + '">' + results[i].address.city + '</button></td>' +
        '<td><button   class="btn btn-light buildingname Locality" type="button" value="' + results[i].address.locality + '">' + results[i].address.locality + '</button></td>' +
        '<td><button  class="btn btn-light buildingname State" value="' + results[i].address.state + '" type="button">' + statusType[results[i].status] + '</button></td>' +
        '<td><button  class="btn btn-light buildingname Buildingtype" value="' + results[i].buildingtype + '" type="button">' + results[i].buildingtype.replace(/([A-Z])/g, ' $1').trim() + '</button></td>' +
        '<td><button  class="btn btn-light buildingname EditBuilding" value="' + results[i].status + '" type="button"><i class="fa fa-pencil" aria-hidden="true"></i></button> <button  style="display:none;" class="btn btn-light PublishProperty" value="' + results[i]._id + '" type="button"><i class="fa fa-eye" aria-hidden="true"></i></button> <button  style="display:none;" class="btn btn-light DelistProperty" value="' + results[i]._id + '" type="button"><i class="fa fa-eye-slash" aria-hidden="true"></i></button></td>' +
        '</tr>';

      $("#buildingtitle > tbody").html(buildingtitle1);

    };

    var chkstatus = [];
    $(".EditBuilding").each(function() {
      chkstatus.push($(this).val());

    });
    console.log(chkstatus);

    $(".PublishProperty").each(function() {
      var match = chkstatus.length;
      console.log(match);

      for (i = 0; i <= match - 1; i++) {
        if (chkstatus[i] === 'active') {
          $(this).closest(".PublishProperty").show();
        }

      }

      for (i = 0; i <= match - 1; i++) {
        if (chkstatus[i] === 'inactive') {
          $(".DelistProperty").show();

        }
      }
    });

    var tr = $(buildingtitle1).closest('tr');


  });
});