CODEWITHSUNDEEP
jqueryhtmlcssjson
Jullian-luc Barber
Jullian-luc Barber

Reputation: 101

How to create a table with data from json/jquery?

I would like to create a table with data from json, should I modify my jquery code to be able to create rows with data or something else (modify my json, css only?...)

I need to create a table horizontally with my data, at the moment I have my <th> tags displayed inline with css as a row, but the data imported with json are in one column vertically.

Jquery:

$(document).ready(function() {
    $.ajax({
        url: 'weather.json',
        type: 'GET',
        dataType: 'json', // Returns JSON
        success: function(response) {
            var sTxt = '';
            $.each(response, function(index, weatherElement) {
                sTxt += '<tr><td>' +  weatherElement.city+'</td></tr>';
                sTxt += '<tr><td>' +  weatherElement.current_condition+'</td></tr>';
                sTxt += '<tr><td>' +  weatherElement.temperature+'</td></tr>';
                sTxt += '<tr><td>' +  weatherElement.wind_speed+'</td></tr>';
                sTxt += '<tr><td>' +  weatherElement.wind_direction+'</td></tr>';
                sTxt += '<tr><td>' +  weatherElement.wind_chill_factor+'</td></tr>';
            });
            $('#weatherlist').append(sTxt);
        },
        error: function() {
            $('#info').html('<p>An error has occurred</p>');
        }
    });
});

Html:

    <!DOCTYPE html>
    <html>

    <head>
        <title>Ajax and json Data</title>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="weather.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>

        <body>
            <header>
                <h1>British and Irish Counties - Weather Data</h1>
            </header>
            <section>
                <table id="weatherlist">
                    <tr>
                        <th>City</th>
                        <th>Conditions</th>
                        <th>Temperature</th>
                        <th>Wind Speed</th>
                        <th>Wind Direction</th>
                        <th>Wind Chill Factor</th>
                    </tr>
                </table>
                <div id="updatemessage"></div>
                <p id="info"></p>
            </section>
            <footer>
            </footer>
        </body>

        </html>

Upvotes: 1

Views: 1478

Answers (1)

HaukurHaf
HaukurHaf

Reputation: 13796

Your table rows are not formatted correctly. You should wrap all the td elements in a single tr element.

Change this:

sTxt += '<tr><td>' +  weatherElement.city+'</td></tr>';
sTxt += '<tr><td>' +  weatherElement.current_condition+'</td></tr>';
sTxt += '<tr><td>' +  weatherElement.temperature+'</td></tr>';
sTxt += '<tr><td>' +  weatherElement.wind_speed+'</td></tr>';
sTxt += '<tr><td>' +  weatherElement.wind_direction+'</td></tr>';
sTxt += '<tr><td>' +  weatherElement.wind_chill_factor+'</td></tr>';

To this:

sTxt += '<tr>';
sTxt += '<td>' +  weatherElement.city+'</td>';
sTxt += '<td>' +  weatherElement.current_condition+'</td>';
sTxt += '<td>' +  weatherElement.temperature+'</td>';
sTxt += '<td>' +  weatherElement.wind_speed+'</td>';
sTxt += '<td>' +  weatherElement.wind_direction+'</td>';
sTxt += '<td>' +  weatherElement.wind_chill_factor+'</td>';
sTxt += '</tr>';

Upvotes: 5

Related Questions