Trong hướng dẫn này, bạn sẽ học cách tìm nạp dữ liệu từ API từ xa và xuất dữ liệu đó vào trang HTML. Học cách làm việc với API, là một kỹ năng tiện dụng cần có vì nó cho phép bạn xây dựng các ứng dụng từ dữ liệu mà những người khác đã tạo.
API mà chúng tôi sẽ sử dụng là thecocktaildb một API miễn phí với hơn 600 công thức nấu ăn đồ uống mà không yêu cầu một tài khoản để bắt đầu. Nếu các loại cocktail không phải là thứ của bạn, thì đó cũng là thesportsdb, theaudiodb và themealdb, tất cả đều miễn phí và có sẵn công khai.
Chúng tôi sẽ xây dựng một trang để lấy một loại cocktail ngẫu nhiên như sau:
Hãy bắt đầu bằng cách tạo một tệp HTML với đánh dấu sau:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Random Cocktail Recipe</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div id="cocktail"></div> <div id="overlay"></div> <script src="script.js"></script> </body> </html>
Code language: HTML, XML (xml)Tiếp theo trong tệp script.js, chúng tôi sẽ thực hiện yêu cầu của mình bằng API tìm nạp. Hiện đang được hỗ trợ trong tất cả các trình duyệt không bao gồm IE và Opera Mini, API Fetch cung cấp một giao diện đơn giản để tìm nạp tài nguyên HTTP.
fetch("//www.thecocktaildb.com/api/json/v1/1/random.php") .then((response) => { if (response.ok) { return response.json(); } else { throw new Error("NETWORK RESPONSE ERROR"); } }) .then(data => { console.log(data); displayCocktail(data) }) .catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)Nếu yêu cầu thành công, bạn sẽ có thể xem dữ liệu trong bảng điều khiển:
Bây giờ chúng ta có thể chuyển dữ liệu này đến một chức năng sẽ đưa nó vào HTML. Tạo hàm displayCocktail() trong script.js. Sau đó, chúng tôi sẽ khai báo các biến cho
fetch("//www.thecocktaildb.com/api/json/v1/1/random.php") .then((response) => { if (response.ok) { return response.json(); } else { throw new Error("NETWORK RESPONSE ERROR"); } }) .then(data => { console.log(data); displayCocktail(data) }) .catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)0 vàfetch("//www.thecocktaildb.com/api/json/v1/1/random.php") .then((response) => { if (response.ok) { return response.json(); } else { throw new Error("NETWORK RESPONSE ERROR"); } }) .then(data => { console.log(data); displayCocktail(data) }) .catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)1 được sử dụng để xuất dữ liệu:function displayCocktail(data) { const cocktail = data.drinks[0]; const cocktailDiv = document.getElementById("cocktail"); ... }
Code language: JavaScript (javascript)Bây giờ, hãy để xuất hiện dữ liệu vào HTML của chúng tôi bắt đầu với tên cocktail:
... const cocktailName = cocktail.strDrink; const heading = document.createElement("h2"); heading.innerHTML = cocktailName; cocktailDiv.appendChild(heading); ...
Code language: JavaScript (javascript)Tiếp theo, hãy để có được hình ảnh và cũng thêm nó vào cocktail
fetch("//www.thecocktaildb.com/api/json/v1/1/random.php") .then((response) => { if (response.ok) { return response.json(); } else { throw new Error("NETWORK RESPONSE ERROR"); } }) .then(data => { console.log(data); displayCocktail(data) }) .catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)1. Chúng tôi cũng sẽ sử dụng hình ảnh này làm nền chofetch("//www.thecocktaildb.com/api/json/v1/1/random.php") .then((response) => { if (response.ok) { return response.json(); } else { throw new Error("NETWORK RESPONSE ERROR"); } }) .then(data => { console.log(data); displayCocktail(data) }) .catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)3:... const cocktailImg = document.createElement("img"); cocktailImg.src = cocktail.strDrinkThumb; cocktailDiv.appendChild(cocktailImg); document.body.style.backgroundImage = "url('" + cocktail.strDrinkThumb + "')"; ...
Code language: JavaScript (javascript)Các thành phần khó sản xuất hơn vì chúng không được lưu trữ trong một mảng mà chúng ta có thể dễ dàng vượt qua. Để khắc phục điều này, chúng tôi sẽ tạo ra một đối tượng và chỉ thêm các thành phần mà don lồng có giá trị
fetch("//www.thecocktaildb.com/api/json/v1/1/random.php") .then((response) => { if (response.ok) { return response.json(); } else { throw new Error("NETWORK RESPONSE ERROR"); } }) .then(data => { console.log(data); displayCocktail(data) }) .catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)4:Sau đó, chúng ta có thể lặp qua các thành phần này và đưa chúng vào danh sách các thành phần chưa được đặt hàng:
... const cocktailIngredients = document.createElement("ul"); cocktailDiv.appendChild(cocktailIngredients); const getIngredients = Object.keys(cocktail) .filter(function (ingredient) { return ingredient.indexOf("strIngredient") == 0; }) .reduce(function (ingredients, ingredient) { if (cocktail[ingredient] != null) { ingredients[ingredient] = cocktail[ingredient]; } return ingredients; }, {}); for (let key in getIngredients) { let value = getIngredients[key]; listItem = document.createElement("li"); listItem.innerHTML = value; cocktailIngredients.appendChild(listItem); } ...
Code language: JavaScript (javascript)Điều đó kết thúc JavaScript.
Tất cả những gì còn lại để làm là thêm các CSS sau vào tệp
fetch("//www.thecocktaildb.com/api/json/v1/1/random.php") .then((response) => { if (response.ok) { return response.json(); } else { throw new Error("NETWORK RESPONSE ERROR"); } }) .then(data => { console.log(data); displayCocktail(data) }) .catch((error) => console.error("FETCH ERROR:", error));
Code language: JavaScript (javascript)5:html { height: 100%; } body { display: flex; justify-content: center; align-items: center; height: 100%; background-size: cover; font-family: sans-serif; } #overlay { background: rgba(147, 135, 242, 0.9); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } #cocktail { max-width: 350px; text-align: center; padding: 30px 30px 12px 30px; color: #fff; background-color: #7766d7; border: 4px solid #9387f2; border-radius: 5px; } #cocktail h2 { margin: 0 0 15px 0; text-transform: uppercase; } #cocktail img { max-width: 300px; border: 6px solid #fff; border-radius: 150px; } #cocktail ul { list-style: none; margin: 0; padding: 0; } #cocktail li { padding: 15px 0; font-size: 18px; } #cocktail li:not(:last-of-type) { border-bottom: 1px solid #fff; }
Code language: CSS (css)Trong hướng dẫn này, bạn đã học cách xây dựng một trang web hiển thị một công thức cocktail ngẫu nhiên từ API. Nếu bạn muốn tìm hiểu thêm về API tìm nạp, hãy xem các tài liệu web MDN.