Добрый день! У меня есть данные на основе которых я строю динамическую таблицу
const dbObj = [
{
id: '5c2286fb23e87be312d55d9a',
name: { firstName: 'Brooks', lastName: 'Stone' },
phone: '+7 (843) 431-2190',
about: 'Qui aliquip esse occaecat voluptate cillum laborum do adipisicing ea. Lorem dolor pariatur exercitation et Lorem voluptate reprehenderit. Culpa nisi sunt laborum culpa eu et nulla aute aliqua commodo cupidatat culpa. Eu laboris dolor enim officia mollit labore proident proident tempor ex minim magna dolor. Ipsum cillum officia irure amet enim voluptate consequat deserunt laborum nulla excepteur pariatur voluptate incididunt. In excepteur adipisicing dolor ea occaecat elit. Irure dolor quis cillum minim voluptate.',
eyeColor: 'blue'
},
{
id: '5c2286fb25005bd0905c04e1',
name: { firstName: 'Susie', lastName: 'Newman' },
phone: '+7 (910) 551-3326',
about: 'Non eiusmod minim ut anim qui non dolore veniam. Lorem veniam nostrud ullamco ad enim commodo incididunt amet ipsum irure. Minim sint tempor incididunt quis. Excepteur commodo mollit elit voluptate reprehenderit eiusmod ex nostrud dolor mollit. Culpa duis pariatur anim sunt in irure ex aliqua.',
eyeColor: 'red'
},
{
id: '5c2286fb7f4c26c63eff1b66',
name: { firstName: 'Armani', lastName: 'Armani' },
phone: '+7 (939) 409-2841',
about: 'Eu ipsum est in exercitation voluptate occaecat fugiat fugiat ea elit ad veniam adipisicing ullamco. Laboris consectetur enim dolore amet exercitation sit non do reprehenderit non. Proident consequat anim non voluptate non culpa sit occaecat adipisicing. Reprehenderit dolor cillum laboris incididunt exercitation quis esse in ad ut voluptate commodo in. Exercitation veniam adipisicing irure ut qui nulla.',
eyeColor: 'brown'
}
]
Я пытаюсь построить таблицу с функцией сортировки по алфавиту. Код JS:
let dbObj = JSON.parse(JSON.stringify(dataBase));
function createTable(db) {
let tableContent = document.getElementById('content');
let maxTextLen = 50;
tableContent.innerHTML = '';
for(let i=0; i<db.length; i++) {
let row = `<tr>
<td>${db[i].name.firstName}</td>
<td>${db[i].name.lastName}</td>
<td>${(db[i].about.length > maxTextLen) ? db[i].about.substring(0, maxTextLen) + '...' : db[i].about}</td>
<td>${db[i].eyeColor}</td>
</tr>
`
tableContent.innerHTML += row;
}
}
createTable(dbObj);
const headers = document.querySelectorAll('.header');
headers.forEach( element => {
element.addEventListener('click', e => {
console.log(e.target.id)
if(e.target.dataset.order == 'des') {
e.target.dataset.order = 'asc'
dbObj = dbObj.sort((a,b) =>
a[e.target.id] > b[e.target.id] ? 1 : -1
)
}else {
e.target.dataset.order = 'des'
dbObj = dbObj.sort((a,b) =>
a[e.target.id] < b[e.target.id] ? 1 : -1
)
}
createTable(dbObj)
console.log(e.target.dataset.order)
})
})
// console.log(headers);
});
HTML код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.min.css">
<title>Test</title>
</head>
<body>
<table class="table">
<tr class="info">
<th class="header" id="firstName" data-order="des">Имя</th>
<th class="header" id="lastName" data-order="des">Фамилия</th>
<th class="header" id="about" data-order="des">Описание</th>
<th class="header" id="eyeColor" data-order="des">Цвет Глаз</th>
</tr>
<tbody id="content" class="content">
</tbody>
</table>
<script src="/src/js/script.js"></script>
</body>
</html>
Суть вопроса: колонки eyeColor и about сортируются как надо по алфавиту, все работает правильно. Но первые две колонки firstName и lastName не сортируются по алфавиту. Причем, если убрать в исходном файле с данными вложенность объекта с именем (вынести firstName и lastName), то все нормально работает, как и остальные колонки. Не понимаю почему так, может кто подскажет как быть в данной ситуации? Что неправильно в коде?
PS Я конечно сделал костыль, убирающий вложенность, но там такой говнокод и, как мне кажется это абсолютно неправильные манипуляции. Поэтому реквестирую варианты правльного
PS Без JQuery pls
Всем Спасибо!
Простой
