1

I would like to format the content of my popup so that null values are completely removed. At this point, my popup is filled with the features.properties array. There are 20 elements in properties, and depending on the queried feature, many of those values will be 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);

At this point, an example popup with some null values looks like this:

enter image description here

My aim is to eliminate null values and not to display them in the popup.

So far I've tried the JSON.stringify option instead of listing each element in separate <div> element. 

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, "")

This produces the desired result but then formatting is the problem.

enter image description here

The JSON object does not display well in a popup even when encasing it in <pre> tags, which produces:

enter image description here

I would like to know if there is a solution to format my popup so that it looks like the first image - but excludes null values. How can one do this is html by listing all of the property elements (course1, course2, course3, etc...) without producing a bunch of empty <div> s?

iskandarblue
  • 7,208
  • 15
  • 60
  • 130
  • please look at it : http://stackoverflow.com/questions/477667/how-to-check-null-objects-in-jquery – Yigit Yuksel Jan 12 '17 at 11:25
  • Here's a basic way: https://jsfiddle.net/hjyfhm2y/ –  Jan 12 '17 at 11:33
  • thanks @ChrisG but I just tried that function and it's still producing nulls - I think because the nulls are strings with `"null"` – iskandarblue Jan 12 '17 at 11:38
  • In that case: https://jsfiddle.net/hjyfhm2y/1/ –  Jan 12 '17 at 11:39
  • this works! how would one also exclude, for example, a key called `field_1` or another key ? could you add that update? If you submit an answer I can mark it as correct. thanks @ChrisG! – iskandarblue Jan 12 '17 at 11:44

2 Answers2

1

Here's one way using classic 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>

Use it by calling .setHTML(htmlFromProps(features.properties, [])) where the second argument is an array of fields you want to exclude.

0

You could try filtering your properties, see the example below:

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

The crucial part is .filter(value => value) where filter makes sure that only truthy (non-null) values remain in the array.

Christian Zosel
  • 1,424
  • 1
  • 9
  • 16