[jQuery|HTML] Dynamiczne generowanie tabeli na podstawie danych JSON

Ręczne tworzenie tabel z dużą ilością danych jest czasochłonne i nudne, dlatego warto takie tabele generować dynamicznie np. za pomocą jQuery. W tym wpisie pokażę jak wygenerować wiersze i kolumny tabeli na bazie danych w JSON.

Kod HTML

Zacznijmy od stworzenia tabeli:

<table id="table-cars" class="table table-striped">
    <thead>
        <tr>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Oczywiście, aby tabela miała ładny wygląd trzeba ją sobie ostylować np. korzystając z Bootstrapa.

Kod JavaScript / jQuery

<script>
        $(document).ready(function () {
        
            // Przykładowe dane JSON
            var jsonData = {
                "headers": ["Marka", "Pojemność (l)", "Moc (KM)"],
                "data": [
                    {"marka": "Volkswagen", "pojemność": 1.6, "moc": 110},
                    {"marka": "Toyota", "pojemność": 2.0, "moc": 150},
                    {"marka": "Ford", "pojemność": 2.5, "moc": 200},
                    {"marka": "BMW", "pojemność": 3.0, "moc": 320},
                    {"marka": "Audi", "pojemność": 2.0, "moc": 190}
                ]
            };

            // Generowanie nagłówków tabeli
            jsonData.headers.forEach(function (header) {
            
                $('#table-cars thead tr').append('<th>' + header + '</th>');
                
            });

            // Generowanie wierszy tabeli
            jsonData.data.forEach(function (item) {
            
                $('#table-cars tbody').append(
                    '<tr>' +
                    '<td>' + item.marka + '</td>' +
                    '<td>' + item.pojemność + '</td>' +
                    '<td>' + item.moc + '</td>' +
                    '</tr>'
                );
                
            });
            
        });
</script>

Oczywiście szybciej i łatwiej byłoby wygenerować tabelę z poziomu PHP.