Đáp án bài tập Javascript cơ bản Ajax – Thời tiết của thành phố

Đáp án của Bài tập Javascript cơ bản: JSON Ajax.
Trong phần này chủ yếu là lấy dữ liệu từ API server, dùng hàm jQuery.getJSON để khỏi phải mất công parse sang object khi lấy dữ liệu từ server so với hàm jQuery.get, còn nếu không bạn hãy dùng jQuery.ajax rồi thêm rong request gửi đi: dataType: "json"

Bài tập 1

Hiển thị thông tin thời tiết của một thành phố (London)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="baitap-json-column.js"> </script>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 15px;
        }
    </style>
</head>
<body>
    <div id="table" ></div>
</body>
</html>
$.getJSON(
    "https://raw.githubusercontent.com/hitanan/html5-Audio-Player/master/weather.json",
    function(data) {
        let weather = data.consolidated_weather;
        let table = "<table>";
        let headerTd = "";
        let maxTd = "";
        let minTd = "";
        let img = "";
        for (var i = 0; i < weather.length; i++) {
            console.log(weather[i]);
            headerTd += `<td>${weather[i].applicable_date}</td>`;
            maxTd += `<td>${weather[i].max_temp.toFixed(2)}</td>`;
            minTd += `<td>${weather[i].min_temp.toFixed(2)}</td>`;
            img += `<td>
            <img src="https://www.metaweather.com/static/img/weather/ico/${
                weather[i].weather_state_abbr
            }.ico">
           
            <div>${weather[i].weather_state_name}</div>
          </td>`;
        }
        table += `<tr>
        <td>Thoi Gian</td>
        ${headerTd}
        </tr>`;

        table += `<tr>
        <td>Thoi Tiet</td>
        ${img}
        </tr>`;
        table += `<tr>
        <td>Nhiet Do Cao Nhat</td>
        ${maxTd}
        </tr>`;
        table += `<tr>
        <td>Nhiet Do Thap Nhat</td>
        ${minTd}
        </tr>`;

        table += `</table>`;

        $("#table").html(table);
    }
);
$.getJSON(
    "https://raw.githubusercontent.com/hitanan/html5-Audio-Player/master/weather.json",
    function(data) {
        let weather = data.consolidated_weather;
        let table = "<table>";
        let day = "";
        table += `<tr>
        <td>Thoi Gian</td>
        <td>Thoi Tiet</td>
        <td>Nhiet Do Cao Nhat</td>
        <td>Nhiet Do Thap Nhat</td>
        </tr>`;
        for (var i = 0; i < weather.length; i++) {
            day = "";
            console.log(weather[i]);
            day += `<td>${weather[i].applicable_date}</td>`;
            day += `<td>${weather[i].max_temp.toFixed(2)}</td>`;
            day += `<td>${weather[i].min_temp.toFixed(2)}</td>`;
            day += `<td>
            <img src="https://www.metaweather.com/static/img/weather/ico/${
                weather[i].weather_state_abbr
            }.ico">
           
            <div>${weather[i].weather_state_name}</div>
          </td>`;
            table += `<tr>${day}</tr>`;
        }
        table += `</table>`;

        $("#table").html(table);
    }
);