1

@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";
        }
      });
    }
}

1
  • el resto me los pone como ocultos, el problema está entonces en la función paraTaxo() que abre el siguiente, no?
    – user68481
    Commented el 31 may. 2020 a las 10:51

2 respuestas 2

1

En lugar de listar todos los elementos, en cada vuelta del bucle se pregunta si el elemento taxonómico es diferente y sólo se añade si es distinto al anterior. Como es un arbol taxonómico, cada vez que un elemento cambia se reinician todos los taxones inferiores.

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"}];

//datos2 si los datos no están ordenados por todos los campos que pueden repetirse, pueden aparecer repeticiones   
 var datos2 = [{"clase":"Actinopterygii","orden":"Zeiformes","familia":"Zeidae","genero":"Zeus","nombre":"Zeus faber"},{"clase":"Actinopterygii","orden":"Clupeiformes","familia":"Clupeidae","genero":"Alosa","nombre":"Alosa fallax"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Trichiuridae","genero":"Aphanopus","nombre":"Aphanopus carbo"},{"clase":"Actinopterygii","orden":"Osmeriformes","familia":"Argentinidae","genero":"Argentina","nombre":"Argentina silus"},{"clase":"Actinopterygii","orden":"Osmeriformes","familia":"Argentinidae","genero":"Argentina","nombre":"Argentina sphyraena"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sciaenidae","genero":"Argyrosomus","nombre":"Argyrosomus regius"},{"clase":"Actinopterygii","orden":"Atheriniformes","familia":"Atherinidae","genero":"Atherina","nombre":"Atherina presbyter"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Scombridae","genero":"Auxis","nombre":"Auxis rochei"},{"clase":"Actinopterygii","orden":"Tetraodontiformes","familia":"Balistidae","genero":"Balistes","nombre":"Balistes capriscus"},{"clase":"Actinopterygii","orden":"Beloniformes","familia":"Belonidae","genero":"Belone","nombre":"Belone belone"},{"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":"Perciformes","familia":"Sparidae","genero":"Boops","nombre":"Boops boops"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Bramidae","genero":"Brama","nombre":"Brama brama"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Callionymidae","genero":"Callionymus","nombre":"Callionymus lyra"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Gadidae","genero":"Pollachius","nombre":"Pollachius pollachius"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Gadidae","genero":"Pollachius","nombre":"Pollachius virens"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Polyprionidae","genero":"Polyprion","nombre":"Polyprion americanus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Scombridae","genero":"Sarda","nombre":"Sarda sarda"},{"clase":"Actinopterygii","orden":"Clupeiformes","familia":"Clupeidae","genero":"Sardina","nombre":"Sardina pilchardus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sparidae","genero":"Sarpa","nombre":"Sarpa salpa"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Scombridae","genero":"Scomber","nombre":"Scomber colias"},{"clase":"Actinopterygii","orden":"Beloniformes","familia":"Scomberesocidae","genero":"Scomberesox","nombre":"Scomberesox saurus saurus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Scombridae","genero":"Scomber","nombre":"Scomber scombrus"},{"clase":"Actinopterygii","orden":"Pleuronectiformes","familia":"Scophthalmidae","genero":"Scophthalmus","nombre":"Scophthalmus maximus"},{"clase":"Actinopterygii","orden":"Pleuronectiformes","familia":"Scophthalmidae","genero":"Scophthalmus","nombre":"Scophthalmus rhombus"},{"clase":"Actinopterygii","orden":"Scorpaeniformes","familia":"Scorpaenidae","genero":"Scorpaena","nombre":"Scorpaena notata"},{"clase":"Actinopterygii","orden":"Scorpaeniformes","familia":"Scorpaenidae","genero":"Scorpaena","nombre":"Scorpaena porcus"},{"clase":"Actinopterygii","orden":"Scorpaeniformes","familia":"Scorpaenidae","genero":"Scorpaena","nombre":"Scorpaena scrofa"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Serranidae","genero":"Serranus","nombre":"Serranus cabrilla"},{"clase":"Actinopterygii","orden":"Pleuronectiformes","familia":"Soleidae","genero":"Solea","nombre":"Solea solea"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sparidae","genero":"Sparus","nombre":"Sparus aurata"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sphyraenidae","genero":"Sphyraena","nombre":"Sphyraena sphyraena"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sparidae","genero":"Spondyliosoma","nombre":"Spondyliosoma cantharus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Labridae","genero":"Symphodus","nombre":"Symphodus melops"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Scombridae","genero":"Thunnus","nombre":"Thunnus alalunga"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Scombridae","genero":"Thunnus","nombre":"Thunnus obesus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Scombridae","genero":"Thunnus","nombre":"Thunnus thynnus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Trachinidae","genero":"Trachinus","nombre":"Trachinus draco"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Carangidae","genero":"Trachurus","nombre":"Trachurus mediterraneus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Carangidae","genero":"Trachurus","nombre":"Trachurus picturatus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Carangidae","genero":"Trachurus","nombre":"Trachurus trachurus"},{"clase":"Actinopterygii","orden":"Scorpaeniformes","familia":"Sebastidae","genero":"Trachyscorpia","nombre":"Trachyscorpia echinata"},{"clase":"Actinopterygii","orden":"Scorpaeniformes","familia":"Triglidae","genero":"Trigla","nombre":"Trigla lyra"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Gadidae","genero":"Trisopterus","nombre":"Trisopterus luscus"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Gadidae","genero":"Trisopterus","nombre":"Trisopterus minutus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sciaenidae","genero":"Umbrina","nombre":"Umbrina canariensis"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sciaenidae","genero":"Umbrina","nombre":"Umbrina cirrosa"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Uranoscopidae","genero":"Uranoscopus","nombre":"Uranoscopus scaber"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Xiphiidae","genero":"Xiphias","nombre":"Xiphias gladius"},{"clase":"Actinopterygii","orden":"Zeiformes","familia":"Zeidae","genero":"Zenopsis","nombre":"Zenopsis conchifer"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Caproidae","genero":"Capros","nombre":"Capros aper"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Centrolophidae","genero":"Centrolophus","nombre":"Centrolophus niger"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Cepolidae","genero":"Cepola","nombre":"Cepola macrophthalma"},{"clase":"Actinopterygii","orden":"Scorpaeniformes","familia":"Triglidae","genero":"Aspitrigla","nombre":"Chelidonichthys cuculus"},{"clase":"Actinopterygii","orden":"Scorpaeniformes","familia":"Triglidae","genero":"Trigloporus","nombre":"Chelidonichthys lastoviza"},{"clase":"Actinopterygii","orden":"Scorpaeniformes","familia":"Triglidae","genero":"Chelidonichthys","nombre":"Chelidonichthys lucerna"},{"clase":"Actinopterygii","orden":"Scorpaeniformes","familia":"Triglidae","genero":"Chelidonichthys","nombre":"Chelidonichthys obscurus"},{"clase":"Actinopterygii","orden":"Anguilliformes","familia":"Congridae","genero":"Conger","nombre":"Conger conger"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Labridae","genero":"Coris","nombre":"Coris julis"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sparidae","genero":"Dentex","nombre":"Dentex dentex"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Moronidae","genero":"Dicentrarchus","nombre":"Dicentrarchus labrax"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sparidae","genero":"Diplodus","nombre":"Diplodus cervinus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sparidae","genero":"Diplodus","nombre":"Diplodus puntazzo"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sparidae","genero":"Diplodus","nombre":"Diplodus sargus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sparidae","genero":"Diplodus","nombre":"Diplodus vulgaris"},{"clase":"Actinopterygii","orden":"Clupeiformes","familia":"Engraulidae","genero":"Engraulis","nombre":"Engraulis encrasicolus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Epigonidae","genero":"Epigonus","nombre":"Epigonus telescopus"},{"clase":"Actinopterygii","orden":"Scorpaeniformes","familia":"Triglidae","genero":"Eutrigla","nombre":"Eutrigla gurnardus"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Gadidae","genero":"Gadus","nombre":"Gadus morhua"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Lotidae","genero":"Gaidropsarus","nombre":"Gaidropsarus vulgaris"},{"clase":"Actinopterygii","orden":"Pleuronectiformes","familia":"Pleuronectidae","genero":"Glyptocephalus","nombre":"Glyptocephalus cynoglossus"},{"clase":"Actinopterygii","orden":"Scorpaeniformes","familia":"Sebastidae","genero":"Helicolenus","nombre":"Helicolenus dactylopterus"},{"clase":"Actinopterygii","orden":"Beryciformes","familia":"Trachichthyidae","genero":"Hoplostethus","nombre":"Hoplostethus mediterraneus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Scombridae","genero":"Katsuwonus","nombre":"Katsuwonus pelamis"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Labridae","genero":"Labrus","nombre":"Labrus bergylta"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Labridae","genero":"Labrus","nombre":"Labrus mixtus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Trichiuridae","genero":"Lepidopus","nombre":"Lepidopus caudatus"},{"clase":"Actinopterygii","orden":"Pleuronectiformes","familia":"Scophthalmidae","genero":"Lepidorhombus","nombre":"Lepidorhombus boscii"},{"clase":"Actinopterygii","orden":"Pleuronectiformes","familia":"Scophthalmidae","genero":"Lepidorhombus","nombre":"Lepidorhombus whiffiagonis"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sparidae","genero":"Lithognathus","nombre":"Lithognathus mormyrus"},{"clase":"Actinopterygii","orden":"Lophiiformes","familia":"Lophiidae","genero":"Lophius","nombre":"Lophius budegassa"},{"clase":"Actinopterygii","orden":"Lophiiformes","familia":"Lophiidae","genero":"Lophius","nombre":"Lophius piscatorius"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Gadidae","genero":"Melanogrammus","nombre":"Melanogrammus aeglefinus"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Gadidae","genero":"Merlangius","nombre":"Merlangius merlangus"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Merlucciidae","genero":"Merluccius","nombre":"Merluccius merluccius"},{"clase":"Actinopterygii","orden":"Pleuronectiformes","familia":"Soleidae","genero":"Microchirus","nombre":"Microchirus variegatus"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Gadidae","genero":"Micromesistius","nombre":"Micromesistius poutassou"},{"clase":"Actinopterygii","orden":"Pleuronectiformes","familia":"Pleuronectidae","genero":"Microstomus","nombre":"Microstomus kitt"},{"clase":"Actinopterygii","orden":"Tetraodontiformes","familia":"Molidae","genero":"Mola","nombre":"Mola mola"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Lotidae","genero":"Molva","nombre":"Molva macrophthalma"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Lotidae","genero":"Molva","nombre":"Molva molva"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Moridae","genero":"Mora","nombre":"Mora moro"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Mugilidae","genero":"Mugil","nombre":"Mugil cephalus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Mullidae","genero":"Mullus","nombre":"Mullus surmuletus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sparidae","genero":"Oblada","nombre":"Oblada melanura"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sparidae","genero":"Pagellus","nombre":"Pagellus acarne"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sparidae","genero":"Pagellus","nombre":"Pagellus bogaraveo"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sparidae","genero":"Pagellus","nombre":"Pagellus erythrinus"},{"clase":"Actinopterygii","orden":"Perciformes","familia":"Sparidae","genero":"Pagrus","nombre":"Pagrus pagrus"},{"clase":"Actinopterygii","orden":"Pleuronectiformes","familia":"Soleidae","genero":"Pegusa","nombre":"Pegusa lascaris"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Phycidae","genero":"Phycis","nombre":"Phycis blennoides"},{"clase":"Actinopterygii","orden":"Gadiformes","familia":"Phycidae","genero":"Phycis","nombre":"Phycis phycis"},{"clase":"Actinopterygii","orden":"Pleuronectiformes","familia":"Pleuronectidae","genero":"Platichthys","nombre":"Platichthys flesus"},{"clase":"Actinopterygii","orden":"Pleuronectiformes","familia":"Pleuronectidae","genero":"Pleuronectes","nombre":"Pleuronectes platessa"},{"clase":"Cephalopoda","orden":"Teuthida","familia":"Ommastrephidae","genero":"Illex","nombre":"Illex coindetii"},{"clase":"Cephalopoda","orden":"Teuthida","familia":"Loliginidae","genero":"Alloteuthis","nombre":"Alloteuthis"},{"clase":"Cephalopoda","orden":"Octopoda","familia":"Eledonidae","genero":"Eledone","nombre":"Eledone cirrhosa"},{"clase":"Cephalopoda","orden":"Sepiida","familia":"Sepiidae","genero":"Sepia","nombre":"Sepia elegans"},{"clase":"Cephalopoda","orden":"Sepiida","familia":"Sepiidae","genero":"Sepia","nombre":"Sepia officinalis"},{"clase":"Cephalopoda","orden":"Octopoda","familia":"Octopodidae","genero":"Octopus","nombre":"Octopus vulgaris"},{"clase":"Cephalopoda","orden":"Sepiida","familia":"Sepiidae","genero":"Sepia","nombre":"Sepia orbignyana"},{"clase":"Cephalopoda","orden":"Teuthida","familia":"Ommastrephidae","genero":"Todaropsis","nombre":"Todaropsis eblanae"},{"clase":"Cephalopoda","orden":"Teuthida","familia":"Ommastrephidae","genero":"Todarodes","nombre":"Todarodes sagittatus"},{"clase":"Cephalopoda","orden":"Teuthida","familia":"Loliginidae","genero":"Loligo","nombre":"Loligo forbesii"},{"clase":"Cephalopoda","orden":"Teuthida","familia":"Loliginidae","genero":"Loligo","nombre":"Loligo vulgaris"},{"clase":"Elasmobranchii","orden":"Rajiformes","familia":"Rajidae","genero":"Dipturus","nombre":"Dipturus oxyrinchus"},{"clase":"Elasmobranchii","orden":"Squaliformes","familia":"Etmopteridae","genero":"Etmopterus","nombre":"Etmopterus spinax"},{"clase":"Elasmobranchii","orden":"Squaliformes","familia":"Squalidae","genero":"Squalus","nombre":"Squalus acanthias"},{"clase":"Elasmobranchii","orden":"Carcharhiniformes","familia":"Triakidae","genero":"Galeorhinus","nombre":"Galeorhinus galeus"},{"clase":"Elasmobranchii","orden":"Carcharhiniformes","familia":"Pentanchidae","genero":"Galeus","nombre":"Galeus melastomus"},{"clase":"Elasmobranchii","orden":"Carcharhiniformes","familia":"Pentanchidae","genero":"Galeus","nombre":"Galeus atlanticus"},{"clase":"Elasmobranchii","orden":"Carcharhiniformes","familia":"Carcharhinidae","genero":"Prionace","nombre":"Prionace glauca"},{"clase":"Elasmobranchii","orden":"Rajiformes","familia":"Rajidae","genero":"Leucoraja","nombre":"Leucoraja naevus"},{"clase":"Elasmobranchii","orden":"Rajiformes","familia":"Rajidae","genero":"Raja","nombre":"Raja clavata"},{"clase":"Elasmobranchii","orden":"Lamniformes","familia":"Lamnidae","genero":"Isurus","nombre":"Isurus oxyrinchus"},{"clase":"Elasmobranchii","orden":"Carcharhiniformes","familia":"Scyliorhinidae","genero":"Scyliorhinus","nombre":"Scyliorhinus canicula"},{"clase":"Elasmobranchii","orden":"Rajiformes","familia":"Rajidae","genero":"Raja","nombre":"Raja miraletus"},{"clase":"Elasmobranchii","orden":"Squaliformes","familia":"Centrophoridae","genero":"Centrophorus","nombre":"Centrophorus squamosus"},{"clase":"Elasmobranchii","orden":"Rajiformes","familia":"Rajidae","genero":"Raja","nombre":"Raja montagui"},{"clase":"Elasmobranchii","orden":"Carcharhiniformes","familia":"Scyliorhinidae","genero":"Scyliorhinus","nombre":"Scyliorhinus stellaris"},{"clase":"Elasmobranchii","orden":"Rajiformes","familia":"Rajidae","genero":"Raja","nombre":"Raja undulata"},{"clase":"Malacostraca","orden":"Decapoda","familia":"Nephropidae","genero":"Nephrops","nombre":"Nephrops norvegicus"},{"clase":"Malacostraca","orden":"Decapoda","familia":"Palaemonidae","genero":"Palaemon","nombre":"Palaemon serratus"},{"clase":"Malacostraca","orden":"Decapoda","familia":"Majidae","genero":"Maja","nombre":"Maja squinado"},{"clase":"Malacostraca","orden":"Decapoda","familia":"Palinuridae","genero":"Palinurus","nombre":"Palinurus elephas"},{"clase":"Malacostraca","orden":"Decapoda","familia":"Penaeidae","genero":"Parapenaeus","nombre":"Parapenaeus longirostris"},{"clase":"Malacostraca","orden":"Decapoda","familia":"Scyllaridae","genero":"Scyllarus","nombre":"Scyllarus arctus"},{"clase":"Malacostraca","orden":"Decapoda","familia":"Nephropidae","genero":"Homarus","nombre":"Homarus gammarus"},{"clase":"Malacostraca","orden":"Decapoda","familia":"Polybiidae","genero":"Necora","nombre":"Necora puber"},{"clase":"Malacostraca","orden":"Decapoda","familia":"Cancridae","genero":"Cancer","nombre":"Cancer pagurus"}]	;

let html = "", clase = "", orden = "", familia = "", genero = "";
for(var i in datos){
if (datos[i].clase != clase) {
    //inicializamos las variables que corresponden a órdenes taxonómicos internos
    orden = ""; familia = ""; genero = "";
    clase = datos[i].clase;
    html+="<h2>Clase: " + clase + "</h2>";    
  }
  if (datos[i].orden != orden) {
    //inicializamos las variables que corresponden a órdenes taxonómicos internos
    familia = ""; genero = "";
    orden = datos[i].orden;
    html+="<h3>Orden: " + orden + "</h3>";    
  }
  if (datos[i].familia != familia) {
    //inicializamos las variables que corresponden a órdenes taxonómicos internos
    genero = "";
    familia = datos[i].familia;
    html+="<h4>Familia: " + familia + "</h4>";    
  }
  if (datos[i].genero != genero) {
    genero = datos[i].genero;
    html+="<h5>Género: " + genero + "</h5>";    
  }
  html+="<h6>" + datos[i].nombre + "</h6>";
 
}

document.getElementById("taxo").innerHTML = html;
<div id="taxo"></div>

3
  • ahora puedes ver lo que te comentaba de que se repiten Orden, y por eso preguntaba si era problema de la consulta PHP
    – user68481
    Commented el 18 may. 2020 a las 11:26
  • @user68481 es por el orden en que están los registros, como te comentaba para que salgan ordenados deberías ordenar por todos los campos que pueden repetirse, es decir, cambia la consulta "select clase, orden, familia, genero, nombre from vw_spezies order by clase" por "select clase, orden, familia, genero, nombre from vw_spezies order by clase, orden, familia, genero" y debería salir sin repeticiones
    – Carmen
    Commented el 18 may. 2020 a las 14:03
  • Muchísimas Gracias a todos, me puede valer perfectamente. Disculpad el "ruido" generado entre respuestas y comentarios. Saludos.
    – user68481
    Commented el 18 may. 2020 a las 18:36
0

Yo te propongo cambiar el bucle while de tu codigo, para generar el json de la siguiente manera:

while( $resultado = $statement->fetch(PDO::FETCH_ASSOC)){
   $clase =  $resultado['clase'];
   $orden =  $resultado['orden'];
   $familia= $resultado['familia'];
   $genero = $resultado['genero'];
   $nombre = $resultado['nombre'];
   $data[$clase][$orden][$familia][$genero]['nombre'] = $nombre;
}

De esta forma, el json que te va a aparecer es como el siguiente:

{"Actinopterygii":{"Anguilliformes":{"Congridae":{"Conger":{"nombre":"Conger conger"}}},"Atheriniformes":{"Atherinidae":{"Atherina":{"nombre":"Atherina presbyter"}}},"Beloniformes":{"Belonidae":{"Belone":{"nombre":"Belone belone"}},"Scomberesocidae":{"Scomberesox":{"nombre":"Scomberesox saurus saurus"}}},"Beryciformes":{"Berycidae":{"Beryx":{"nombre":"Beryx splendens"}},"Trachichthyidae":{"Hoplostethus":{"nombre":"Hoplostethus mediterraneus"}}}},"Elasmobranchii":{"Carcharhiniformes":{"Triakidae":{"Galeorhinus":{"nombre":"Galeorhinus galeus"}},"Scyliorhinidae":{"Scyliorhinus":{"nombre":"Scyliorhinus stellaris"}},"Carcharhinidae":{"Prionace":{"nombre":"Prionace glauca"}},"Pentanchidae":{"Galeus":{"nombre":"Galeus melastomus"}}}}}

Con esto puedes hacer varios bucles anidados, en los que la clave es el titulo correspondiente (clase, por ej). Imprimes la clave y luego iteras por cada objeto contenido. la clave de ese nuevo objeto es orden, por lo que escribes la clave y luego iteras de nuevo por el siguiente bucle... y asi sucesivamente. Cada vez que se acaba el bucle es que has acabado la iteracion,y puedes cerrar el elemento que necesites.

El resultado del json lo puedes ver asi: https://jsoneditoronline.org/#left=cloud.3ef41ced2bb4436b87935d1597a72422

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.