Как отсортировать объект users по параметру “age” и вывести в виде таблицы используя только javascript и css?

109

14 марта 2021, 12:40

let users = [
    {"name":"Григорий", "surname":"Андреев", "age": 32},
    {"name":"Иван", "surname":"Иванов", "age": 23},
    {"name":"Александр", "surname":"Смирнов", "age": 27}
];

Answer 1

Можно таким образом:

document.addEventListener('DOMContentLoaded', function(){ 
        let users = [ 
            {"name":"Григорий", "surname":"Андреев", "age": 32}, 
            {"name":"Иван", "surname":"Иванов", "age": 23}, 
            {"name":"Александр", "surname":"Смирнов", "age": 27} 
        ]; 
        let table = document.getElementById('table'); 
         
        users.sort(compareAge); 
        users.forEach(function(item, i, arr){ 
            let tr = '<tr>' + '<td>'+item.name+'</td>' + '<td>'+item.surname+'</td>' + '<td>'+item.age+'</td>' +'</tr>'; 
            table.querySelector('tbody').insertAdjacentHTML('beforeend',tr); 
        }); 
    }); 
 
    function compareAge(personA, personB) { 
        return personA.age - personB.age; 
    }

<table id="table"> 
    <thead> 
        <tr> 
            <th>Имя</th> 
            <th>Фамилия</th> 
            <th>Возраст</th> 
        </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table>

Если нужно только JS, самое быстрое решение без создания узлов:

document.addEventListener('DOMContentLoaded', function(){ 
        document.body.insertAdjacentHTML('beforeend','<table id="table">\n' + 
            '    <thead>\n' + 
            '        <tr>\n' + 
            '            <th>Имя</th>\n' + 
            '            <th>Фамилия</th>\n' + 
            '            <th>Возраст</th>\n' + 
            '        </tr>\n' + 
            '    </thead>\n' + 
            '    <tbody>\n' + 
            '    </tbody>\n' + 
            '</table>'); 
 
        let users = [ 
            {"name":"Григорий", "surname":"Андреев", "age": 32}, 
            {"name":"Иван", "surname":"Иванов", "age": 23}, 
            {"name":"Александр", "surname":"Смирнов", "age": 27} 
        ]; 
        let table = document.getElementById('table'); 
         
        users.sort(compareAge); 
        users.forEach(function(item, i, arr){ 
            let tr = '<tr>' + '<td>'+item.name+'</td>' + '<td>'+item.surname+'</td>' + '<td>'+item.age+'</td>' +'</tr>'; 
            table.querySelector('tbody').insertAdjacentHTML('beforeend',tr); 
        }); 
    }); 
 
    function compareAge(personA, personB) { 
        return personA.age - personB.age; 
    }