2

Estoy tratando de ordenar un objeto JSON por nombre en orden alfabético descendente y ascendente.

Sin embargo a llamar a la función sortData() con los datos del JSON, la key por la que ordenar y el tipo me devuelve el mismo array sin ordenar.

La API utilizada para obtener el JSON es: API Randomuser

function testform(e){
    e.preventDefault();
    const queryString= new URLSearchParams(new FormData(document.forms.person)).toString();
    console.log(queryString);
    console.log("Dentro del handler o manejador de form");

    let promise = fetch("https://randomuser.me/api/" + "?" + queryString)
    .then(function(response){
        if(response.ok){
            console.log("Promise OK!");
            return response.json();
        }
    }).then(function(jsonData){
        two.innerHTML='';
        console.log(jsonData); //Salida por consola del objeto antes de ordenar.
        let oJSON = sortData('name.first', jsonData, 'asc'); //Llamo a la función para ordenar.
        console.log(oJSON); //Salida por consola del objeto después de ordenar.
        for(i=0;i<oJSON.results.length;i++){
            Dibujar(CrearTarjeta(oJSON.results[i]));
        };
    }).catch(function(onReject){
        console.warn(onReject);
    });
}

function sortData(key, data, type) {
    let ordered = {};
    let compareFunction = function(a, b) {
      return data[b][key] - data[a][key];
    };
    if (type === "asc") {
      compareFunction = function(a, b) {
        return data[a][key] - data[b][key];
      }
    }
    Object.keys(data).sort(compareFunction).forEach(function(key) {
      ordered[key] = data[key];
    });
    return ordered;
  }

Estructura del objeto

Estructura del objeto

2

2 respuestas 2

2

Aunque ya te han dado una respuesta, yo aportaré otra y te explicaré el problema que estabas encontrando al intentar realizar el ordenamiento.

El primer problema (y creo que el más importante) está en la forma en la que estabas realizando la comparación. Específicamente en tu función compareFunction(). Tu código hacía lo siguiente:

return data[b][key] - data[a][key];

Dado que los valores devueltos por la API son de tipo string (en la mayoría de los casos), realizar una operación aritmética (distinta de la suma) con cadenas de texto producen un resultado tipo NaN. Ejemplo:

let primerObjeto = {
  name: {
    first: 'juan',
    last: 'perez'
  }
}

let segundoObjeto = {
  name: {
    first: 'luis',
    last: 'perez'
  }
}

// realizar operaciones aritméticas (diferentes de la suma) con cadenas de texto devuelve NaN
console.log(primerObjeto.name.first - segundoObjeto.name.first);

// si realizamos una operación de suma el resultado es concatenación de las cadenas
console.log(primerObjeto.name.first + segundoObjeto.name.first);

Por lo tanto tu función de comparación no estaba devolviendo el resultado esperado por el método sort de los tipo Array.

Lo que debes hacer es una comparación (usando los operadores de comparación) entre cadenas. Eso te dará un resultado tipo booleano, y de acuerdo al resultado (true o false) se devuelve un valor positivo, negativo o cero. Ten en cuenta que se devuelve cero sólo si las cadenas son iguales. Por ejemplo:

let primerObjeto = {
      name: {
        first: 'juan',
        last: 'perez'
      }
    }

let segundoObjeto = {
  name: {
    first: 'luis',
    last: 'perez'
  }
}

const compareFirstName = (a, b) => {
  // criterio: ascendente
  if(a.name.first < b.name.first) {
      // a es menor que b según criterio de ordenamiento
      return -1;
  }
  if(a.name.first > b.name.first) {
      // a es mayor que b según criterio de ordenamiento
      return 1;
  }
  // a es igual b según criterio de ordenamiento
  return 0;
}

const compareLastName = (a, b) => {
  // criterio: ascendente
  if(a.name.last < b.name.last) {
      // a es menor que b según criterio de ordenamiento
      return -1;
  }
  if(a.name.last > b.name.last) {
      // a es mayor que b según criterio de ordenamiento
      return 1;
  }
  // a es igual b según criterio de ordenamiento
  return 0;
}

console.log('Comparar nombres: ',compareFirstName(primerObjeto, segundoObjeto));

console.log('Comparar apellidos: ',compareLastName(primerObjeto, segundoObjeto));

Aclarado este punto, veremos el siguiente problema detectado en tu implementación.

Tienes un método llamado sortData(key, data, type), al cual le pasas 3 argumentos o parámetros: key, data y type.

El valor de key es el nombre de la clave del objeto. Dado que los datos los estamos obteniendo de una API y conocemos la estructura de los mismos, podemos usar (como lo haces) directamente el nombre de la clave (y las sub-claves) requeridas para realizar el ordenamiento.

Sin embargo, tienes un error a la hora de intentar acceder al valor de la clave pasada como argumento. Intentas hacer lo siguiente:

objeto[key];

Pero key lo pasas así: name.first

El error está en que la estructura que estás intentando acceder sería la siguiente:

let objeto = {
    first.name: 'valor'
}

La cual es muy diferente de:

let objeto = {
    first: {
        name: 'valor'
    }
}

Por lo tanto objeto[key] tal como lo estás usando devolverá undefined. Veamos:

let objeto = {
    name: {
        first: 'juan',
        last: 'perez'
    }
}

let key = 'name.first';

console.log(objeto[key]);

Como puedes ver, el resultado que esperas accediendo al objeto de la forma en que lo intentas no es el correcto.

Para solventar esto pudieras realizar operaciones un poco complejas, tal vez exista una forma muy elaborada de hacer lo que intentas. Sin embargo, yo usaré algo sencillo dado que la estructura del objeto recibido de nuestra API es conocida.

Vamos a dividir (usando split) el valor de la clave que estás pasando como argumento, y crearemos una estructura de decisión de acuerdo al tamaño del array resultante al realizar el split.

Como la estructura de nuestro objeto contiene una cantidad máxima de objetos anidados, la estructura de decisión tomará en cuenta dicha profundidad.

La idea es separar el nombre de cada clave en un array y luego usando el tamaño del array resultante acceder al valor adecuado. Un ejemplo sería el siguiente:

let objeto = {
    name: {
        first: 'juan',
        last: 'perez'
    }
}

const showValue = (key) => {
    let keys = key.split('.');
    if(keys.length === 1) {
        console.log(objeto[keys[0]]);
    }
    if(keys.length === 2) {
        console.log(objeto[keys[0]][keys[1]]);
    }
}

showValue('name.first');
showValue('name.last');
showValue('name');

Como puedes ver podemos obtener los valores que necesitamos, siempre y cuando pasemos el argumento correcto.

Con todo esto ya tenemos una forma de construir nuestra función de ordenamiento, la cual podremos adecuar según los requerimientos.

Una forma de escribir lo que intentas sería la siguiente:

fetch('https://randomuser.me/api/?results=10&nat=ES')
      .then((response) => {
        if(response.ok) {
          console.log('Response Ok');
          return response.json();
        }
      })
      .then((jsonData) => {
        let unsorted = [];
        let sortedAsc = [];
        let sortedDesc = [];
        
        jsonData.results.forEach((result) => {
          unsorted.push(result.name.first);
        });
        
        console.log('Unsorted:');
        console.log(unsorted);
        
        const sortData = (key, data, order) => {
          const keys = key.split('.');
          const ascOrder = (a,b) => {
            let comparer_a, comparer_b;
            if(keys.length === 1) {
              comparer_a = a[keys[0]];
              comparer_b = b[keys[0]];
            }
            if(keys.length === 2) {
              comparer_a = a[keys[0]][keys[1]];
              comparer_b = b[keys[0]][keys[1]];
            }
            if(comparer_a < comparer_b) {
              return -1;
            }
            if(comparer_b < comparer_a) {
              return 1;
            }
            return 0;
          }
          const descOrder = (a,b) => {
            let comparer_a, comparer_b;
            if(keys.length === 1) {
              comparer_a = a[keys[0]];
              comparer_b = b[keys[0]];
            }
            if(keys.length === 2) {
              comparer_a = a[keys[0]][keys[1]];
              comparer_b = b[keys[0]][keys[1]];
            }
            if(comparer_a < comparer_b) {
              return 1;
            }
            if(comparer_b < comparer_a) {
              return -1;
            }
            return 0;
          }
          
          if(order === 'DESC') {
            return data.sort(descOrder);
          } else {
            return data.sort(ascOrder);;
          }
        }
        
        console.log('Ascendente:');
        let orderedResults = sortData('name.first',jsonData.results,'ASC');
        orderedResults.forEach((result) => {
          sortedAsc.push(result.name.first);
        });
        console.log(sortedAsc);
        
        console.log('Descendente:');
        orderedResults = sortData('name.first',jsonData.results,'DESC');
        orderedResults.forEach((result) => {
          sortedDesc.push(result.name.first);
        });
        console.log(sortedDesc);
      });

Espero que con esto resuelvas tu problema y hayas aclarado las dudas.

0

Hola he hecho algun cambio en tu codigo, creo que esto es lo que buscas:

function testform(e) {
    e.preventDefault();
    const queryString = new URLSearchParams(new FormData(document.forms.person)).toString();
    console.log(queryString);
    console.log("Dentro del handler o manejador de form");

    let promise = fetch("https://randomuser.me/api/" + "?" + queryString)
        .then(function (response) {
            if (response.ok) {
                console.log("Promise OK!");
                return response.json();
            }
        }).then(function (jsonData) {
            two.innerHTML = '';
            console.log(jsonData); //Salida por consola del objeto antes de ordenar.
            let oJSON = sortData(jsonData, 'asc'); //Llamo a la función para ordenar.
            console.log(oJSON); //Salida por consola del objeto después de ordenar.
            for (i = 0; i < oJSON.results.length; i++) {
                Dibujar(CrearTarjeta(oJSON.results[i]));
            };
        }).catch(function (onReject) {
            console.warn(onReject);
        });
}

function sortData(data, type) {
    let ordered = [];
    let dataArr = [].slice.call(data);
    let dataSorted = dataArr.sort((a, b) => {
        if (type === "asc") {
            if (a.name.first < b.name.first) return -1
            else return 1
        } else {
            if (a.name.first > b.name.first) return -1
            else return 1
        }
    });
    dataSorted.forEach(e => ordered.push(e));
    return ordered;
}

Espero que te sirva. Saludos

2
  • Meda error justo aquí. let dataSorted = data.sort((a, b) => { data.sort is not a function el 2 jun. 2019 a las 11:42
  • He modificado el codigo el la respuesta añadiendo el paso que convierte los datos en array, a ver si asi te funciona
    – neollob
    el 2 jun. 2019 a las 12:37

Tu Respuesta

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

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