Leaflet: sort and edit geojson data in a table with if-statements

Question

I'm having trouble with displaying json data in a table. I am working on a map that shows data wich is directly exported as a geojson file from Openstreetmap via overpass-turbo.eu. This means that every point has different features. I want to show as much information in the popup as possible, but keep unessesary information out of the table, plus I want the links to be clickable. This is my code so far, that provides a basic table view of each point. Here is a demo: http://stefang.cepheus.uberspace.de/stackexample/

function everyPoint (feature, layer){
 var popupcontent = [];
    for (var prop in feature.properties) {
        popupcontent.push("<tr><td>" +prop + ": </td><td>" + feature.properties[prop].replace(";", ", ") + "</td></tr>");
    }

    var innerTable = popupcontent.join("");

    layer.bindPopup(
        "<h1>" +feature.properties.name +"</h1>"
        +"<table>" +innerTable + "</table>"
        +"<p> Old or outdated data? Change it on <a href='http://openstreetmap.org/" +feature.id  +"'> on openstreetmap.org</a>.</p>"
    );
};

L.geoJson(karlsruhe, {
    onEachFeature: everyPoint
}).addTo(map);

I want to do three things here:

Hide unnessesary data, basically @ID, Shop:Farm
Switch URLs to hyperlinks, mainly website and contact.website
Show everything else as a text in the table

I tried to solve this with a simple if-statement, but only the else block runs:

var popupcontent = [];
    for (var prop in feature.properties) {
      if (prop == "id" ){
        //do nothing
        }
      else if (prop == "website"){
          popupcontent.push("<tr><td>" +prop + ": </td><td>" + "<a link href='" + feature.properties[prop] + "'></a></td></tr>");
        }

        else {
          popupcontent.push("<tr><td>" +prop + ": </td><td>" + feature.properties[prop].replace(";", ", ") + "</td></tr>");
        }
    }

I believe there is something wrong with the statement in the if function, but I can't figure it out. Thanks for any help :)

Stefan Stefan · Accepted Answer · 2018-03-15T16:27:50

I found the solution, just a few typos plus no text in the link:

 var popupcontent = [];
    for (var prop in feature.properties) {
      if (prop == "@id" ){
        //do nothing
        }
      else if (prop == "website"){
          popupcontent.push("<tr><td>" +prop + ": </td><td>" + "<a link href='" + feature.properties[prop] + "'>" +feature.properties[prop] +"</a></td></tr>");
        }

        else {
          popupcontent.push("<tr><td>" +prop + ": </td><td>" + feature.properties[prop].replace(";", ", ") + "</td></tr>");
        }
    }

Leaflet: sort and edit geojson data in a table with if-statements

1 Answers