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

Question

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>

HaukurHaf · Accepted Answer · 2016-04-15 21:05:49Z

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>';

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related