[Solucionado] Ordenar datos extraidos de JSON en una tabla?

migocr · 15 Mar 2021

Buenas, estoy practicando un poco con Javascript en especial con la manipulacion de informacio a traves de archivos JSON de apis. Logre extraer los datos de PokeApi pero no logro que me los ordene por ID. Alguna sugerencia?

Index

Insertar CODE, HTML o PHP:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="section">     
            <table >
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>                      
                        <th>height</th>
                        <th>weight</th>                       
                    </tr>
                </thead>
                <tbody id="res">                    
                </tbody>
            </table>
        </div>
    </div>
    <script src="prueba.js"> </script>
</body>
</html>

JS

Insertar CODE, HTML o PHP:

for (var i = 1; i < 50; i++) {

    var url = "https://pokeapi.co/api/v2/pokemon/" + i;

    let request = new XMLHttpRequest();
    request.open("GET", url);
    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            var datos = JSON.parse(request.responseText);        
    
                 var x =1;
            if ( datos.id <= x ) {
                console.log(datos.id);
                x++;

               } 
               res.innerHTML += `
                <tr>
                    <td>${datos.id}</td>
                    <td>${datos.name}</td>
                    
                    <td>${datos.height}</td>
                    <td>${datos.weight}</td>
                    
                </tr>
                `            
        }
    }
    request.send();   
}

YeltsinReyes · 15 Mar 2021

@migocr prueba algo asi!

JavaScript:

let array = [];

for (var i = 1; i < 50; i++) {

    var url = "https://pokeapi.co/api/v2/pokemon/" + i;

    let request = new XMLHttpRequest();
    request.open("GET", url);
    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            
            var datos = JSON.parse(request.responseText);
            array.push(datos);
            
          
        }
    }
    
    request.send();
    
}

array.sort(function(a, b) {
    return a.id - b.id;
});

for(let datos of array){
    
    res.innerHTML += `
        <tr>
            <td>${datos.id}</td>
            <td>${datos.name}</td>
            <td>${datos.height}</td>
            <td>${datos.weight}</td>
        </tr>
    `
    
}

migocr · 15 Mar 2021

YeltsinReyes dijo:

@migocr prueba algo asi!

JavaScript:

let array = [];

for (var i = 1; i < 50; i++) {

    var url = "https://pokeapi.co/api/v2/pokemon/" + i;

    let request = new XMLHttpRequest();
    request.open("GET", url);
    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
          
            var datos = JSON.parse(request.responseText);
            array.push(datos);
          
        
        }
    }
  
    request.send();
  
}

array.sort(function(a, b) {
    return a.id - b.id;
});

for(let datos of array){
  
    res.innerHTML += `
        <tr>
            <td>${datos.id}</td>
            <td>${datos.name}</td>
            <td>${datos.height}</td>
            <td>${datos.weight}</td>
        </tr>
    `
  
}

Sabes que, acabo de solucionarlo de una forma mas simple, agregando el parametro false al final del

Insertar CODE, HTML o PHP:

request.open("GET", url, false);

, esto evita que se ejecute asyncronamente javascript entonces me genera un dato a la vez. Gracias por la ayuda igualmente 🙂

Gracias por el codigo, me dare un momento para probarlo tambien 🙂