javascript - 检查是否存在并从返回的 JSON 中删除表行

Question

如何检查是否返回的 JSON 中存在标签，并将其从我的表中输出的行中移除？

在下面的代码片段中，您会看到我有一个返回 Page Name not defined。我不想显示此 label 或任何相关数据。

$.getJSON(pagesUrl, (campaignPages_data) => {
  Array.prototype.groupBy = function(key) {
    var path = key.split('.');
    var result = {};
    try {
      this.forEach(function(item) {
        type = path.reduce(function(a, b) {
          return a[b]
        }, item) || 'null';
        if (!result[type])
          result[type] = [];
        result[type].push(item);
      });
      return result;
    } catch (err) {
      console.log(err);
      return {};
    }
  };

  function getPropertyNum(key, arr) {
    return arr.reduce((a, b) => (key in b ? a + b[key] : a), 0)
  }

  let flattenArr = [].concat.apply([], Object.values(campaignPages_data));
  let groups = flattenArr.groupBy('label');
  let table = document.getElementById('campaign_table');

  table.innerHTML = '';

  if (Object.keys(groups).length > 0) {
    Object.keys(groups).forEach(function(label) {
      let rowCampaign = document.createElement('tr');
      let titleCampaign = document.createElement('td');
      let visitsCampaign = document.createElement('td');
      let uniquesCampaign = document.createElement('td');

      let linkCampaign = document.createElement('span');

      let visitsCampaignNum = document.createElement('span');
      let visitsCampaignPer = document.createElement('span');

      let uniquesCampaignNum = document.createElement('span');
      let uniquesCampaignPer = document.createElement('span');

      let campaign_visits = getPropertyNum('nb_visits', groups[label]);
      let campaign_unique = getPropertyNum('sum_daily_nb_uniq_visitors', groups[label]);

      uniquesCampaignPer.className = "table_percentage";

      rowCampaign.appendChild(titleCampaign);
      rowCampaign.appendChild(visitsCampaign);
      rowCampaign.appendChild(uniquesCampaign);

      titleCampaign.appendChild(linkCampaign);

      visitsCampaign.appendChild(visitsCampaignNum);

      uniquesCampaign.appendChild(uniquesCampaignNum);
      uniquesCampaign.appendChild(uniquesCampaignPer);

      linkCampaign.innerHTML = label;
      visitsCampaignNum.innerHTML = campaign_visits;
      uniquesCampaignNum.innerHTML = campaign_unique;
      uniquesCampaignPer.innerHTML = "&nbsp(" + Math.round(campaign_unique / (campaign_visits / 100)) + "%)";
      table.appendChild(rowCampaign);

    });
  }

  if (Object.keys(groups).length == 0) {
    let rowCampaign = document.createElement('tr');
    let nodata = document.createElement('td');
    let nodataEmpty = document.createElement('td');
    nodata.className = "subscriber subscriber-fixed-alone fixed-cell";
    nodataEmpty.className = "stat number text-center";
    rowCampaign.appendChild(nodata);
    rowCampaign.appendChild(nodataEmpty);
    nodata.innerHTML = "No analytics for these dates"
    table.appendChild(rowCampaign);
  }
});

img.table_image_icon {
  width: 20px;
}

td,
th {
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table border="1">
  <thead>
    <tr>
      <th>Campaign Title</th>
      <th>Page Visits</th>
      <th>Unique Visitors</th>
    </tr>
  </thead>

  <tbody id="campaign_table"></tbody>
</table>

<script>
  let pagesUrl = 'https://discovrbookings.innocraft.cloud/index.php?module=API&method=Actions.getPageTitles&idSite=2&period=range&date=2017-12-17,2018-01-22&format=json&token_auth=68aa5bd12137f13255dcb98794b65dff';
</script>

Answer 1

只需使用 .filter(label => label !== "Page Name not defined") 过滤您的标签:

Object.keys(groups)
    .filter(label => label !== "Page Name not defined")
    .forEach(function(label) {...});

$.getJSON(pagesUrl, (campaignPages_data) => {
  Array.prototype.groupBy = function(key) {
    var path = key.split('.');
    var result = {};
    try {
      this.forEach(function(item) {
        type = path.reduce(function(a, b) {
          return a[b]
        }, item) || 'null';
        if (!result[type])
          result[type] = [];
        result[type].push(item);
      });
      return result;
    } catch (err) {
      console.log(err);
      return {};
    }
  };

  function getPropertyNum(key, arr) {
    return arr.reduce((a, b) => (key in b ? a + b[key] : a), 0)
  }

  let flattenArr = [].concat.apply([], Object.values(campaignPages_data));
  let groups = flattenArr.groupBy('label');
  let table = document.getElementById('campaign_table');

  table.innerHTML = '';

  if (Object.keys(groups).length > 0) {
    Object.keys(groups).filter(label => label !== "Page Name not defined").forEach(function(label) {
      let rowCampaign = document.createElement('tr');
      let titleCampaign = document.createElement('td');
      let visitsCampaign = document.createElement('td');
      let uniquesCampaign = document.createElement('td');

      let linkCampaign = document.createElement('span');

      let visitsCampaignNum = document.createElement('span');
      let visitsCampaignPer = document.createElement('span');

      let uniquesCampaignNum = document.createElement('span');
      let uniquesCampaignPer = document.createElement('span');

      let campaign_visits = getPropertyNum('nb_visits', groups[label]);
      let campaign_unique = getPropertyNum('sum_daily_nb_uniq_visitors', groups[label]);

      uniquesCampaignPer.className = "table_percentage";

      rowCampaign.appendChild(titleCampaign);
      rowCampaign.appendChild(visitsCampaign);
      rowCampaign.appendChild(uniquesCampaign);

      titleCampaign.appendChild(linkCampaign);

      visitsCampaign.appendChild(visitsCampaignNum);

      uniquesCampaign.appendChild(uniquesCampaignNum);
      uniquesCampaign.appendChild(uniquesCampaignPer);

      linkCampaign.innerHTML = label;
      visitsCampaignNum.innerHTML = campaign_visits;
      uniquesCampaignNum.innerHTML = campaign_unique;
      uniquesCampaignPer.innerHTML = "&nbsp(" + Math.round(campaign_unique / (campaign_visits / 100)) + "%)";
      table.appendChild(rowCampaign);

    });
  }

  if (Object.keys(groups).length == 0) {
    let rowCampaign = document.createElement('tr');
    let nodata = document.createElement('td');
    let nodataEmpty = document.createElement('td');
    nodata.className = "subscriber subscriber-fixed-alone fixed-cell";
    nodataEmpty.className = "stat number text-center";
    rowCampaign.appendChild(nodata);
    rowCampaign.appendChild(nodataEmpty);
    nodata.innerHTML = "No analytics for these dates"
    table.appendChild(rowCampaign);
  }
});

img.table_image_icon {
  width: 20px;
}

td,
th {
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table border="1">
  <thead>
    <tr>
      <th>Campaign Title</th>
      <th>Page Visits</th>
      <th>Unique Visitors</th>
    </tr>
  </thead>

  <tbody id="campaign_table"></tbody>
</table>

<script>
  let pagesUrl = 'https://discovrbookings.innocraft.cloud/index.php?module=API&method=Actions.getPageTitles&idSite=2&period=range&date=2017-12-17,2018-01-22&format=json&token_auth=68aa5bd12137f13255dcb98794b65dff';
</script>