Skip to main content
avanzar en el código dando formato
Origen Enlace

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;
}
?> }

Obtengo un json de una consulta y el resultado tengo que agruparlos, (sería una clasificación taxonómica) El json (parte) sería el siguiente:

{[
    {"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"}
    ]}

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){
                //document.getElementById("taxo").innerHTML = "<h2>"+datos.clase+"<h2>";
                    html+=`
                            <h2>Clase: ${datos[i].clase}</h2>
                            <div>
                                <h3>Orden: ${datos[i].orden}</span></h3>
                                <div>
                                    <h4>Familia: ${datos[i].familia}</h4>
                                    <div>
                                        <h5>Genus: ${datos[i].genero}</h5>
                                        <div>
                                            <h6>${datos[i].nombre}</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `
                }

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
    include 'Conexion.php';

    $conexion = new Conexion();
    $cnn = $conexion->getConexion();
    $consulta = "select clase, orden, familia, genero, nombre from vw_spezies order by clase";
    $statement = $cnn->prepare( $consulta );

    $valor= $statement->execute();

    if( $valor ){
        while( $resultado = $statement->fetch(PDO::FETCH_ASSOC)){
            //$data["data"][] = $resultado;
            $data[] = $resultado;
        }
        echo json_encode( $data );
    }else{
        echo "error";
    }
    $statement->closeCursor();
    $conexion = null;

?> 

@carmen usando tu método, que lo imprime sin problema, pero al ir un poco 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 que se haga click, el caso es que dando el formato del modo en que lo hago, me imprime las 4 clases (está bien!), 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 = "";

    for(var i in datos){
        if (datos[i].class_t != class_t) {
            //inicializamos las variables que corresponden a órdenes taxonómicos internos
            order = ""; suborder = ""; infraorder = ""; family = ""; genus = ""; scientific_name = "";
            class_t = datos[i].class_t;
            //html+="<h1>Clase: " + class_t + "</h1>";  
            html+="<h2 class='collapsible' onclick='paraTaxo()'>Clase: " + class_t + "</h2>";
        }
        if (datos[i].order != order) {
            //inicializamos las variables que corresponden a órdenes taxonómicos internos
            suborder = ""; infraorder = ""; family = ""; genus = ""; scientific_name = "";
            order = datos[i].order;
            //html+="<h2>Orden: " + order + "</h2>";
            html+="<div style='display:none;'><h2 class='collapsible' onclick='paraTaxo()'>Orden: " + order + "</h2>";

        }
        if (datos[i].suborder != suborder && datos[i].suborder != null){
            //inicializamos las variables que corresponden a órdenes taxonómicos internos
            infraorder = ""; family = ""; genus = ""; scientific_name = "";
            suborder = datos[i].suborder;
            //html+="<h3>SubOrden: " + suborder + "</h3>";
            html+= "<div style='display:none;'><h2 class='collapsible' onclick='paraTaxo()'>SubOrden: " + suborder + "</h2>";

        }
        if (datos[i].infraorder != infraorder && datos[i].infraorder != null){
            //inicializamos las variables que corresponden a órdenes taxonómicos internos
            family = ""; genus = ""; scientific_name = "";
            infraorder = datos[i].infraorder;
            //html+="<h4>InfraOrden: " + infraorder + "</h4>";
            html+= "<div style='display:none;'><h2 class='collapsible' onclick='paraTaxo()'>Infraorden: " + infraorder + "</h2>";

        }
        if (datos[i].family != family) {
            //inicializamos las variables que corresponden a órdenes taxonómicos internos
            genus = ""; scientific_name = "";
            family = datos[i].family;
            //html+="<h5>Familia: " + family + "</h5>";
            html+="<div style='display:none;'><h2 class='collapsible' onclick='paraTaxo()'>Familia: " + family + "</h2>";

        }
        if (datos[i].genus != genus) {
            genus = datos[i].genus;
            //html+="<h6>Género: " + genus + "</h6>";
            html+= "<div style='display:none;'><h2 class='collapsible' onclick='paraTaxo()'>Genero: " + genus + "</h2>";
        
        }
        //html+="<h6>" + datos[i].scientific_name + "</h6>";
        html+="<div style='display:none;'><h2>" + datos[i].scientific_name + "</h2></div></div></div></div></div></div>";
    }
    document.getElementById("taxo").innerHTML = html;
});
function paraTaxo(){
    var coll = document.getElementsByClassName("collapsible");
    var i;
    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }
}
Editado para añadir más datos
Origen Enlace
Carmen
  • 7.3k
  • 1
  • 16
  • 22

EDICIÓN

Añadido como se hace al consulta para rellenar la variable datos

<?php
    include 'Conexion.php';

    $conexion = new Conexion();
    $cnn = $conexion->getConexion();
    $consulta = "select clase, orden, familia, genero, nombre from vw_spezies order by clase";
    $statement = $cnn->prepare( $consulta );

    $valor= $statement->execute();

    if( $valor ){
        while( $resultado = $statement->fetch(PDO::FETCH_ASSOC)){
            //$data["data"][] = $resultado;
            $data[] = $resultado;
        }
        echo json_encode( $data );
    }else{
        echo "error";
    }
    $statement->closeCursor();
    $conexion = null;

?> 

EDICIÓN

Añadido como se hace al consulta para rellenar la variable datos

<?php
    include 'Conexion.php';

    $conexion = new Conexion();
    $cnn = $conexion->getConexion();
    $consulta = "select clase, orden, familia, genero, nombre from vw_spezies order by clase";
    $statement = $cnn->prepare( $consulta );

    $valor= $statement->execute();

    if( $valor ){
        while( $resultado = $statement->fetch(PDO::FETCH_ASSOC)){
            //$data["data"][] = $resultado;
            $data[] = $resultado;
        }
        echo json_encode( $data );
    }else{
        echo "error";
    }
    $statement->closeCursor();
    $conexion = null;

?> 
se eliminaron 246 caracteres en el cuerpo
Origen Enlace
for(var i in datos){
                //document.getElementById("taxo").innerHTML = "<h2>"+datos.clase+"<h2>";
                    html+=`
                            <h2 class="collapsible">Clase<h2>Clase: ${datos[i].clase}</h2>
                            <div style="display:block;"><div>
                                <h3 class="collapsible vein">Orden<h3>Orden: ${datos[i].orden}</span></h3>
                                <div style="display:block;"><div>
                                    <h4 class="collapsible cuaren">Familia<h4>Familia: ${datos[i].familia}</h4>
                                    <div style="display:block"><div>
                                        <h5 class="collapsible sesen">Genus<h5>Genus: ${datos[i].genero}</h5>
                                        <div style="display:block"><div>
                                            <h6 class="ochen">$<h6>${datos[i].nombre}</h6>
                                            <div style="display:block"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `
                }

La visualización pretendo hacerla tipo árbol. Ya veis que no solamente hay coincidencias en orden y familyfamilia, también puede haberlas en genusgenero. ¿Cómo podría lograr esto? No se si en javascript o php...

for(var i in datos){
                //document.getElementById("taxo").innerHTML = "<h2>"+datos.clase+"<h2>";
                    html+=`
                            <h2 class="collapsible">Clase: ${datos[i].clase}</h2>
                            <div style="display:block;">
                                <h3 class="collapsible vein">Orden: ${datos[i].orden}</span></h3>
                                <div style="display:block;">
                                    <h4 class="collapsible cuaren">Familia: ${datos[i].familia}</h4>
                                    <div style="display:block">
                                        <h5 class="collapsible sesen">Genus: ${datos[i].genero}</h5>
                                        <div style="display:block">
                                            <h6 class="ochen">${datos[i].nombre}</h6>
                                            <div style="display:block"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `
                }

La visualización pretendo hacerla tipo árbol. Ya veis que no solamente hay coincidencias en orden y family, también puede haberlas en genus. ¿Cómo podría lograr esto? No se si en javascript o php...

for(var i in datos){
                //document.getElementById("taxo").innerHTML = "<h2>"+datos.clase+"<h2>";
                    html+=`
                            <h2>Clase: ${datos[i].clase}</h2>
                            <div>
                                <h3>Orden: ${datos[i].orden}</span></h3>
                                <div>
                                    <h4>Familia: ${datos[i].familia}</h4>
                                    <div>
                                        <h5>Genus: ${datos[i].genero}</h5>
                                        <div>
                                            <h6>${datos[i].nombre}</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `
                }

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...

Origen Enlace
Loading