elcaiaimar Posted December 11, 2014 Share Posted December 11, 2014 Hello everybody! I'm working with openlayers 3 and I have several features, such as buildings, sewers, etc in my map. This features contain differents elements with values which have been put for me, such as name, coordinates, etc. My purpose was get this information of this features and I got it, but only in console.log. I want to visualize this information but in a innerHTML. I 've tried to put this in my code: if (feature) { content.innerHTML = feature.getProperties(); return container.style.display = 'block'; } getProperties get an object of all property names and values and returns an Object. More information here: http://openlayers.org/en/master/apidoc/ol.Feature.html?unstable=true#getProperties With this code, when I click on the features I obtain: [object Object]. But I could check with console.log that when I click on the features, info is ok: if (feature) { console.log(feature.getProperties()); return container.style.display = 'block'; } Another way to get information is change the code such as: if (feature) { content.innerHTML = feature.getId() + ': ' + feature.get('name'); return container.style.display = 'block'; } But it's not the correct way to do it because each feature has different data. So, my question is: How could I show the feature data? I mean, the same info which appears using console but with innerHTML or something similar. Thank you very much! Link to comment Share on other sites More sharing options...
justsomeguy Posted December 11, 2014 Share Posted December 11, 2014 If it returns an object then you'll need to access the specific properties of the object that you want to show and write those out. You can't just write an object or array to innerHTML, because innerHTML takes a string. "[object Object]" is what you get when you convert an object to a string. You should be able to see which properties the object has available in the console, so you can access those properties and build your string to write to innerHTML. Link to comment Share on other sites More sharing options...
elcaiaimar Posted December 11, 2014 Author Share Posted December 11, 2014 So, if I get this in console when I click on a feature: Object { geometry: Object, codimbornal: "B12", coorx: 725694.19931, coory: 4372192.91419, tipo: "RECTANGULAR PEQUENO", origen: "SIRA-II", observaciones: "Imbornal Pl. Ayuntamiento" } I should write something similar to the next? content.innerHTML = feature.getId() + ': ' + feature.get('codimbornal') + feature.get('coorx') + feature.get('coory')...etc It works but only for this feature. Other features have different elements and then it appears 'undefined' in the news elements. I think you are speaking about other thing right? I know I have to add something to my code but I don't know what Could you tell me what would I have to do if, for example, all my features only had one element? (This element would have a different name to each feature) Thank you very much! Link to comment Share on other sites More sharing options...
justsomeguy Posted December 11, 2014 Share Posted December 11, 2014 Those are just properties, you don't need to use a get method. You could just write feature.coorx or feature.coory, etc. Could you tell me what would I have to do if, for example, all my features only had one element? (This element would have a different name to each feature)If you don't know the name of the property then you can use Object.keys to get an array of the property names for an object:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys Link to comment Share on other sites More sharing options...
elcaiaimar Posted December 12, 2014 Author Share Posted December 12, 2014 I' ve solved this problem with the next: if (feature) { var objeto = feature.getProperties(), propiedades; for (propiedades in objeto){ content.innerHTML += propiedades + ':' + objeto[propiedades] + "<br />"; } return container.style.display = 'block';} Now, when I click on the features, I obtain its info. It's great! But, there is one problem more, when I click in the first feature, everything is ok, but when I click in the second I get the info about the first one and the second one. It's a problem of duplicity. It happens the same if I click in the same feature: first time, ok; second time, info appears twice, and successively. How could I solve this problem? Thank you very much! Link to comment Share on other sites More sharing options...
etsted Posted December 12, 2014 Share Posted December 12, 2014 you are using concatenation here content.innerHTML += propiedades + ':' + objeto[propiedades] + "<br />"; change it to: content.innerHTML = propiedades + ':' + objeto[propiedades] + "<br />"; Link to comment Share on other sites More sharing options...
elcaiaimar Posted December 12, 2014 Author Share Posted December 12, 2014 I have several properties and if I remove the concatenation I only get the last property of the feature. But thanks for your response! Link to comment Share on other sites More sharing options...
etsted Posted December 12, 2014 Share Posted December 12, 2014 then use a for loop to loop trough the properties. Store the values in a variable then place the variable where u want it Link to comment Share on other sites More sharing options...
elcaiaimar Posted December 12, 2014 Author Share Posted December 12, 2014 Could you give me an example? I'm trying it and it doesn't work yet. Thank you again! Link to comment Share on other sites More sharing options...
Ingolme Posted December 12, 2014 Share Posted December 12, 2014 You just need to set it to an empty string before you begin the loop. var propiedades;content.innerHTML = "";for (propiedades in objeto){ content.innerHTML += propiedades + ':' + objeto[propiedades] + "<br />";} Link to comment Share on other sites More sharing options...
elcaiaimar Posted December 12, 2014 Author Share Posted December 12, 2014 It works! Thank you very much!! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now