Tengo un arreglo de objetos muy simple, algo como esto:
let profiles = [
{
'title': 'X',
'url' : 'https://google.com',
'description': 'Lorem'
},
{
'title': 'Y',
'description': 'Ipsum'
}
];
Cada objeto tiene las propiedades title
y description
, pero tiene de manera opcional url
.
Hago un sort
al arreglo para ordenarlo en orden alfabético según el title
.
profiles.sort( (a, b) => {
return a.title.toLowerCase() > b.title.toLowerCase();
});
Y al final inserto los datos del arreglo en el HTML con un forEach
:
profiles.forEach( (profile) => {
let element = `<tr><td>${profile.title}</td><td>${profile.description}</td></tr>`;
if ( profile.url !== undefined ) {
element = `<tr><td>${profile.title}</td><td><a href="${profile.url}" target="_blank">${profile.description}</a></td></tr>`;
}
document.getElementsByTagName('tbody')[0].insertAdjacentHTML('beforeend', element);
});
Esto funciona bien, el problema es que cuando llego a los 11 elementos del arreglo no lo ordena correctamente. Ejemplo:
Debería obtener esto:
Age
Digimon
Github
Hobbies
Job
MAL
Name
OS
Steam
Twitter
Type
Pero obtengo esto:
Job
OS
Github
Digimon
Name
MAL
Hobbies
Age
Steam
Twitter
Type
Hasta ahora he intentado meter tanto la declaración del arreglo como el sort dentro de una función que retorna una promesa, para después utilizar el then
de esa promesa y así insertar en el HTML, pero funcionó exactamente igual. Se veía algo así:
let ordenar = () => {
return new Promise( (resolve, reject) => {
let profiles = [
{..},{..}
];
profiles.sort( (a, b) => {
return a.title.toLowerCase() > b.title.toLowerCase();
});
resolve(profiles);
});
}
ordenar().then(resp => {
resp.forEach( (profile) => {
....
});
}).catch();