从 html 弹出窗口中删除空值

Question

我想格式化弹出窗口的内容，以便完全删除 null 值。此时，我的弹出窗口中填充了features.properties 数组。 properties 中有 20 个元素，根据查询的功能，其中许多值将是 null。

  var feature = features[0];

  // Populate the popup and set its coordinates
  // based on the feature found.

  popup.setLngLat(feature.geometry.coordinates)
      .setHTML('<div><b>' + feature.properties.city + '</div></b>' + '<div>'
       + feature.properties.course1 + '</div>' + '<div>'+
       feature.properties.course2 + '<div>' + feature.properties.course3 + '</div>')
      .addTo(map);

此时，带有一些 null 值的示例弹出窗口如下所示：

我的目标是消除null 值，而不是在弹出窗口中显示它们。

到目前为止，我已经尝试了 JSON.stringify 选项，而不是在单独的 <div> 元素中列出每个元素。

function replacer(key, value) {
            // Filtering out properties
            if (value === "null" || value === null) {
              return undefined;
            }
            return value;
          }

JSON.stringify(feature.properties, replacer, "\t").replace(/\"/g, "").replace(/,/g, "") 

这会产生所需的结果，但格式是问题。

即使将 JSON 对象包含在 <pre> 标记中，它也无法在弹出窗口中很好地显示，这会产生：

我想知道是否有解决方案来格式化我的弹出窗口，使其看起来像第一张图片 - 但不包括空值。通过列出所有属性元素（course1、course2、course3 等...） 没有 产生一堆空的<div>，如何做到这一点是html年代？

Answer 1

这是使用经典 Javascript 的一种方式：

var features = {
  properties: {
    city: "Salzburg",
    course1: "DCLead",
    course2: "null",
    course3: null,
    field_1: "Hello"
  }
};

function htmlFromProps(props, exclude) {
  var html = "";
  var i = 0;
  for (p in props) {
    if (props[p] && props[p] != "null" && exclude.indexOf(p) === -1) {
      html += "<div>" + (i === 0 ? "<strong>" : "");
      html += props[p];
      html += (i++ === 0 ? "</strong>" : "") + "</div>\n";
    }
  }
  return html;
}

popup.innerHTML = htmlFromProps(features.properties, ["field_1"]);

#popup {
  width: 80%
}

<textarea id="popup"></textarea>

通过调用 .setHTML(htmlFromProps(features.properties, [])) 来使用它，其中第二个参数是要排除的字段数组。

Answer 2

您可以尝试过滤您的属性，请参见下面的示例：

var feature = {
  properties: {
    city: 'Salzburg',
    course1: 'test',
    course3: 'test3'
  }
};

var html = Object
  .keys(feature.properties)
  .map(key => feature.properties[key])
  .filter(value => value)
  .map((value, i) => i === 0
      ? `<div><strong>${value}</strong></div>`
      : `<div>${value}</div>`
      )

console.log(html);

关键部分是.filter(value => value)，其中filter 确保只有真（非空）值保留在数组中。