problemas con getProperties()

[elcaiaimar]

Hola a todos,

Estoy trabajando con openlayers3 y tengo varias features, tales como manzanas, pozos, imbornales, etc en mi mapa. Estas features contienen elementos diferentes con valores que han sido introducidos por mi, como: nombre, coordenadas, etc. Mi objetivo era obtener esta información y lo he conseguido, pero solo usando console.log. Lo que quiero es que esta información se visualice en un innerHTML.

He intentado poner esto en mi código:

if (feature) {
content.innerHTML = feature.getProperties();
return container.style.display = 'block';
}

getProperties obtiene un objeto de todos los nombres y valores de las propiedades y devuelve un objeto. Más información aquí:
[URL="http://openlayers.org/en/master/apidoc/ol.Feature.html?unstable=true#getProperties"]http://openlayers.org/en/master/apidoc/ol.Feature.html?unstable=true#getProperties[/URL]

Con este código, cuando hago click sobre las features, obtengo: [object Object].

Pero pude comprobar usando console.log que cuando pincho sobre las features obtengo toda la información.

if (feature) {
console.log(feature.getProperties());
return container.style.display = 'block';
}

Otra forma de obtener la información es cambiando el código, tal que:

if (feature) {
content.innerHTML = feature.getId() + ': ' + feature.get('name');
return container.style.display = 'block';
}

Pero no es la forma correcta de hacerlo porque cada feature tiene elementos diferentes.

Por lo tanto mi pregunta es: ¿Cómo podría yo mostrar la informacion de las features?, es decir, la misma información que me aparece cuando uso console pero usando esta vez innerHTML o algo similar.

Muchas gracias!

[Panino5001]

Habría que ver qué tipo de objeto es. Podrías intentar usar JSON.stringify

[Alexis88]

Me parece que vas a tener que iterar sobre el objeto e ir imprimiendo los valores de sus propiedades. Puedes hacer una prueba de esta manera:

Código Javascript:

var objeto = feature.getProperties(),
    propiedad;
for (propiedad in objeto){
    content.innerHTML += propiedad + ": " + objeto[propiedad] + "<br />";
}
 

Saludos

[elcaiaimar]

Por si sirve de ayuda, el resultado que obtengo usando console.log es este:

Object { geometry: Object, codimbornal: "B12", coorx: 725694.19931, coory: 4372192.91419, tipo: "RECTANGULAR PEQUENO", origen: "SIRA-II", observaciones: "Imbornal Pl. Ayuntamiento" }

[elcaiaimar]

Funciona! Aunque no sé aún por qué!

he puesto esto en mi código:

if (feature) {
var objeto = feature.getProperties(),
propiedades;
for (propiedades in objeto){
content.innerHTML += propiedades + ": " + objeto[propiedades] + "<br />";
}
return container.style.display = 'block';
}

Y ahora me salen todos los elementos con sus valores. ¿A que se debe?

Y también hay un problema y es que se duplica la información. Es decir, si pincho en una primera feature me sale todo bien, pero si pincho a la siguiente me sale la información anterior y la nueva y así sucesivamente.
Qué podría hacer para solucionarlo?

Muchísimas gracias!