Necesito ayuda para ordenar unos valores al mostrarse

DancingMonki · 3 Noviembre 2020, 02:15 AM

Tengo una tabla en la que se muestran 5 pilotos, con varios valores. El valor del nombre del piloto, el número del piloto y el tiempo que es el último valor. Me gustaría que al mostrar el resultado al ejecutar el código, se muestre la tabla de pilotos en orden del tiempo del piloto. Es decir, debería mostrarse primero a Sebastian Vettle, segundo a Lewis Hamilton, etc etc. Pero no logro como hacer para ordenar arrays. Os dejo mi código:

Código [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>
</head>
<body>
    <div class="principal">
        <script>
            var pilotos = new Array();
            pilotos = [
                [
                    "Lando Norris", 4, 60
                ],
                [
                    "Sebastian Vettel", 5, 10
                ],
                [
                    "Carlos Sainz", 55, 50
                ],
                [
                    "Lewis Hamilton", 44, 15
                ],
                [
                    "Kimi Rikkonen", 7, 37
                ],
            ];
            document.write('<div class="contenedor">');

            for (i = 0; i < pilotos.length; i++) {

                document.write('<div class="caja">');
                document.write('<div class="detallito">', '<div class="name"><div class="namecolor"><h3>' + pilotos[0] + '</h3></div><h4>');
                document.write('<div class="numbcolor">', 'Número:  ' + pilotos[1] + '</div></h4></div>');
                document.write('<div class="marks"><div class="time"><h3>', 'Tiempo:  ' + pilotos[2] + ' minutos', '</h3></div></div></div>');
                document.write('</div>');
            }
        </script>
    </div>
</body>
</html>

@XSStringManolo · 3 Noviembre 2020, 09:07 AM

A parte del añadirte el ordenamiento del array, te cambié prácticamente todo el código.

No utilices document.write.

Normalmente se utiliza javascript en archivos externos y se incluye con <script src="./codigo.js"></script> como última etiqueta del body.

Esto se hace para poder reutilizar un archivo en múltiples páginas. Separar funcionalidad (javascript) de contenido/estructura (html) así como permitir aplicar políticas que bloquean la ejecución de javascript en el documento .html. De esta forma impides hackeos mediante inyecciones de código a tu aplicación.

Con el css pasa exactamente lo mismo.

Si hay algo que no entiendas pregunta.

Código (javascript) [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>Document</title>
</head>
<body>                                                     
<script>
"use strict";
/* Este texto al inicio de tu código javascript te avisará
* si cometes algún error. Por ejemplo olvidarte del var.
* Te pasó en el for, y esto causa problemas que pasan
* inadvertidos con facilidad.
https://medium.com/@mrando.via/use-strict-en-javascript-bfbe1815bd80                                                  */

/* Usa let en lugar de var. No tienes ni que saber como
* funciona. Sirve para no sobrescribir variables cuando
* les pones el mismo nombre. Entre otras cosas.
* Si creas una variable que no va variar nunca en el
programa, entonces utiliza const.
https://cybmeta.com/var-let-y-const-en-javascript
*/

let pilotos = [
/* Añade este elemento si quieres probar las comprobaciones
  ["<"+"img onerror=alert() src= >", "", "8"],
*/
  ["Lando Norris", 4, 60],
  ["Sebastian Vettel", 5, 10],
  ["Carlos Sainz", 55, 50],
  ["Lewis Hamilton", 44, 15],
  ["Kimi Rikkonen", 7, 37] /* Te sobraba una coma aquí */
]

.sort(function(a, b) {
  return a[2] - b[2];
});

/* Método array.sort(function);
https://www.todojs.com/usar-correctamente-el-metodo-sort/
*
* Es común utilizar funciones anónimas como parámetros si
* no se va a volver a llamar a la función desde otra parte
* del código.
https://riptutorial.com/es/javascript/example/726/funcion-anonima
*/


/* Remplazos:
* <main> en lugar de <div class="principal">
* <section class="contenedor"> en lugar de del div
* <article> en lugar de div
* <span> en lugar de div
*
* Esto es lo que se conoce como html léxico.
* El objetivo de remplazar los divs por otras etiquetas es
* que el código sea más comprensible para humanos y bots.
* http://blog.ikhuerta.com/maquetacion-seo-en-html5-div-article-section-o-aside?gb4=4
*/

let codigo = `
<main>
<section class="contenedor">
`;

/* Estas comillas sirven para utilizar sintaxis de
* plantillas. De esta forma se respetan los saltos de linea
* sin tener que utilizar \n y también puedes meter
* variables directamente utilizando ${miVariable} por lo
* que resulta más cómodo y se ve mejor la estructura del
* html. También permite utilizar expressiones como
* una suma ${5 + 9} u otras más complejas.
https://www.etnassoft.com/2016/10/05/template-strings-en-es6-estudiando-las-nuevas-plantillas-de-cadena-en-javascript/
*/

for (let i = 0; i < pilotos.length; ++i) {
  codigo += `<article class="caja">
      <div class="detallito">

        <div class="name">
          <span class="namecolor">
<!-- Sin serialización:
  <h3>${pilotos[i][0]}</h3>
-->
            <h3>${htmlEntities(pilotos[i][0])}</h3>
          </span>

          <span class="numbcolor">
<!-- Sin comprobación de tipo:
  <h4>Número: ${pilotos[i][1]}</h4>
-->
            <h4>Número: ${typeof(pilotos[i][1]) !== "number" ? "error" : pilotos[i][1]}</h4>
          </span>
        </div>

        <div class="marks">
          <span class="time">
<!-- Sin comprobación de tipo:
  <h3>Tiempo: ${pilotos[i][2]} minutos</h3>
-->
            <h3>Tiempo: ${typeof(pilotos[i][2]) !== "number" ? "error" : pilotos[i][2] + " minutos"}</h3>
          </span>
        </div>

      </div>
    </article>\
`;
}

codigo += `</section>
</main>`;

/* Añade el código al final del interior de <body></body>
* es decir, en la última línea del body. */
document.body.innerHTML += codigo;


/* Esta función devuelve el texto que se le pase por
* parámetro como entidades html. Esto sirve para que no
* se ejecute algo que se supone que es texto como código.
* por ejemplo si añades a un corredor que se llame
* Juan "el más rápido", te rompería las comillas de tu
* código. Esta función deberías utilizarla cuando le
* permitas al usuario meter los datos. De esta forma no
* se le deja introducir código.
https://sodocumentation.net/es/html/topic/5229/entidades-de-caracter


*/
function htmlEntities(data) {
  return data.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
   return '&#'+i.charCodeAt(0)+';';
  });
}
</script>
<style>
.caja {
  border: 1px solid #aaa;
  text-align: center;
  margin-bottom: 4%;
}
</style>
</body>
</html>

DancingMonki · 3 Noviembre 2020, 12:53 PM

Muchas gracias!

Test Foro de elhacker.net SMF 2.1

Necesito ayuda para ordenar unos valores al mostrarse

DancingMonki

@XSStringManolo

DancingMonki