Bài tập Javascript cơ bản: JSON Ajax

Trong tài tập này chúng ta sẽ lấy dữ liệu từ server API thông qua ajax bằng thư viện jQuery, sau đó hiển thị dữ liệu của thành phố lên HTML.

Bài tập 1 : Hiển thị thông tin thời tiết của thành phố

Hiển thị thông tin thời tiết của thành phố London. Phần hình ảnh của thời tiết ( Snow,sunny,..) được hiển thị tương ứng với dữ liệu “weather state abbreviation” trả về trong json, Url để sử dụng trong html tag hiển thị hình ảnh <img> như sau:

`https://www.metaweather.com/static/img/weather/${weather_state_abbr}.svg`

Ví dụ, trong dữ liệu trả về và url hình ảnh tương ứng như sau:

var json = { "weather_state_name":"Heavy Cloud","weather_state_abbr":"hc"}
// => url  hình ảnh: https://www.metaweather.com/static/img/weather/hc.svg

1. JSON API thông tin thành phố và 5 day forecast (London):
https://www.metaweather.com/api/location/44418/
2. JSON API cho hiển thị thời tiết 1 ngày của một thành phố (London hôm nay 27/5/2019):
https://www.metaweather.com/api/location/44418/2019/5/27/

Một ví dụ của hiển thị nội dung html như sau:

Ví dụ hiển thị dữ liệu 8 ngày tới

Linh tham khảo của API và tài liệu về các element table, image trong html

Bài tập 2: Thiết kế một trang tìm kiếm việc làm

Bài tập 3


Một số bài tập khác: Thiết kế một trang tìm kiếm việc làm giao diện như trang web sau:
https://jobs.github.com/positions?description=python&location=new+york
Api document chi tiết tại đây:
https://jobs.github.com/api
Trang web chi tiết các bài viết, các bài comment,… của user
https://jsonplaceholder.typicode.com/