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?

5
  • please look at it : stackoverflow.com/questions/477667/… Jan 12, 2017 at 11:25
  • Here's a basic way: jsfiddle.net/hjyfhm2y
    – user5734311
    Jan 12, 2017 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" Jan 12, 2017 at 11:38
  • In that case: jsfiddle.net/hjyfhm2y/1
    – user5734311
    Jan 12, 2017 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! Jan 12, 2017 at 11:44

2 Answers 2

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.

3
  • If you add <strong> to the first <div>, this is the perfect answer, assuming the target browsers all support ES2015.
    – user5734311
    Jan 12, 2017 at 11:41
  • how would I wrap this in .setHTML? Jan 12, 2017 at 12:09
  • I updated my answer to include <strong>. You can just call .setHTML(html)! Jan 12, 2017 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.