Obtengo@carmen usando tu método, que lo imprime sin problema, pero al ir un jsonpoco más allá, me encuentro con algún problemilla. Le doy formato del modo que los "nodos" se abran o cierren en función de una consulta yque se haga click, el resultado tengocaso es que agruparlosdando el formato del modo en que lo hago, (sería una clasificación taxonómica) El jsonme imprime las 4 clases (parteestá bien!) sería el siguiente:, pero después solamente me saca un orden, suborden, infraorden, familia, genero, y nombre por cada clase. Seguramente me estoy dejando algo, y no será gran cosa, pero no acierto
{[
var datos = [ {"clase":"Actinopterygii","orden":"Anguilliformes","familia":"Congridae","genero":"Conger","nombre":"Conger conger"},
{"clase":"Actinopterygii","orden":"Atheriniformes","familia":"Atherinidae","genero":"Atherina","nombre":"Atherina presbyter"},
{"clase":"Actinopterygii","orden":"Beloniformes","familia":"Belonidae","genero":"Belone","nombre":"Belone belone"},
{"clase":"Actinopterygii","orden":"Beloniformes","familia":"Scomberesocidae","genero":"Scomberesox","nombre":"Scomberesox saurus saurus"},
{"clase":"Actinopterygii","orden":"Beryciformes","familia":"Berycidae","genero":"Beryx","nombre":"Beryx decadactylus"},
{"clase":"Actinopterygii","orden":"Beryciformes","familia":"Berycidae","genero":"Beryx","nombre":"Beryx splendens"},
{"clase":"Actinopterygii","orden":"Beryciformes","familia":"Trachichthyidae","genero":"Hoplostethus","nombre":"Hoplostethus mediterraneus"},
{"clase":"Elasmobranchii","orden":"Carcharhiniformes","familia":"Triakidae","genero":"Galeorhinus","nombre":"Galeorhinus galeus"},
{"clase":"Elasmobranchii","orden":"Carcharhiniformes","familia":"Scyliorhinidae","genero":"Scyliorhinus","nombre":"Scyliorhinus stellaris"},
{"clase":"Elasmobranchii","orden":"Carcharhiniformes","familia":"Carcharhinidae","genero":"Prionace","nombre":"Prionace glauca"},
{"clase":"Elasmobranchii","orden":"Carcharhiniformes","familia":"Pentanchidae","genero":"Galeus","nombre":"Galeus melastomus"}];
let html = "", ]}class_t = "", order = "", suborder = "", infraorder = "", family = "", genus = "", scientific_name = "";
Probé con el bucle for y mostrando en una cadena de texto, pero evidentemente me salió todo repetido uno tras otro..
for(var i in datos){
if (datos[i].class_t != class_t) {
//document.getElementById("taxo").innerHTMLinicializamos =las "<h2>"+datos.clase+"<h2>";
variables que corresponden a órdenes taxonómicos internos
order = html+=`
""; suborder = ""; infraorder = ""; family = ""; genus = ""; scientific_name = "";
class_t <h2>Clase:= ${datos[i].clase}</h2>class_t;
//html+="<h1>Clase: " + class_t + "</h1>";
<div>
html+="<h2 class='collapsible' onclick='paraTaxo()'>Clase: " + class_t + "</h2>";
}
if (datos[i].order != order) {
<h3>Orden: ${datos[i].orden}< /span></h3>
inicializamos las variables que corresponden a órdenes taxonómicos internos
suborder = ""; infraorder = ""; family = ""; genus = ""; scientific_name = <div>"";
order = datos[i].order;
//html+="<h2>Orden: " + order + "</h2>";
<h4>Familia html+="<div style='display:none;'><h2 ${datos[i].familia}<class='collapsible' onclick='paraTaxo()'>Orden: " + order + "</h4>h2>";
}
if (datos[i].suborder != suborder && datos[i].suborder != null){
//inicializamos <div>
las variables que corresponden a órdenes taxonómicos internos
infraorder = ""; family = ""; genus = ""; scientific_name = "";
suborder <h5>Genus:= ${datos[i].genero}<suborder;
/h5>/html+="<h3>SubOrden: " + suborder + "</h3>";
html+= "<div style='display:none;'><h2 class='collapsible' onclick='paraTaxo()'>SubOrden: " + suborder + "</h2>";
}
if (datos[i].infraorder != <div>infraorder && datos[i].infraorder != null){
//inicializamos las variables que corresponden a órdenes taxonómicos internos
family = ""; genus = ""; scientific_name = "";
<h6>${ infraorder = datos[i].nombre}<infraorder;
/h6>/html+="<h4>InfraOrden: " + infraorder + "</h4>";
html+= "<div style='display:none;'><h2 class='collapsible' onclick='paraTaxo()'>Infraorden: " + infraorder + "</h2>";
}
if (datos[i].family != family) </div>{
//inicializamos las variables que corresponden a órdenes taxonómicos internos
genus = ""; scientific_name </div>
= "";
family = datos[i].family;
//html+="<h5>Familia: " + family + <"</div>h5>";
html+="<div style='display:none;'><h2 class='collapsible' onclick='paraTaxo()'>Familia: " + family + "</h2>";
</div>}
if (datos[i].genus != genus) {
`genus = datos[i].genus;
//html+="<h6>Género: " + genus }
La visualización pretendo hacerla tipo árbol. Ya veis que no solamente hay coincidencias en orden y familia, también puede haberlas en genero. ¿Cómo podría lograr esto? No se si en javascript o php...
EDICIÓN
Añadido como se hace al consulta para rellenar la variable datos
<?php+ "</h6>";
include 'Conexion.php';
$conexion = new Conexionhtml+= "<div style='display:none;'><h2 class='collapsible' onclick='paraTaxo();'>Genero: " + genus + "</h2>";
$cnn = $conexion->getConexion();
$consulta = "select clase, orden,}
familia, genero, nombre from vw_spezies order by clase";//html+="<h6>" + datos[i].scientific_name + "</h6>";
$statement = $cnn->prepare( $consulta );
html+="<div style='display:none;'><h2>" + datos[i].scientific_name + "</h2></div></div></div></div></div></div>";
$valor=}
$statement->execute document.getElementById("taxo").innerHTML = html;
});
function paraTaxo(){
if(var $valorcoll = document.getElementsByClassName("collapsible"){;
var i;
while( $resultadofor (i = $statement->fetch(PDO::FETCH_ASSOC)0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
//$data["data"][] = $resultado;
this.classList.toggle("active");
var $data[]content = $resultado;this.nextElementSibling;
}if (content.style.display === "block") {
echo json_encode( $datacontent.style.display );= "none";
} else {
echo "error"; content.style.display = "block";
}
$statement->closeCursor( });
$conexion = null;
}
?> }