Học Javascript – Jquery – Vue js qua từng bài tập Get JSON Data API GIPHY

Tiếp tục với loạt bài viết ” học Javascript – Jquery – Vue js qua từng bài tập “.Ở bài viết trước mình đã hướng dẫn các bạn xử l ý một danh sách user giả định lấy từ server về. Trong bài viết này chúng ta sẽ get json data từ API GIPHY.

Get Json Data Tap 03

Yêu cầu:

Nắm được Javascript căn bản củ thể là phần JS HTML DOM, tất nhiên thì chưa nắm vững cũng không sao.
Khi đọc xong một bài viết bắt tay vào thực hành với bài tập đó.
Nếu như trong quá trình làm bài tập gặp phải một vấn đề gì đó thì bạn nên hỏi google. Nếu không tìm được câu trả lời thì mới để lại comment. Bạn nên nhớ google là một kĩ năng không thể thiếu của Dev.

Bài tập căn bản 03: Get JSON Data API GIPHY

Click vào đây để xem demo.

Get Json Data Tap 003

Mô tả bài tập

Chúng ta sẽ hiển thị các hình ảnh gif lấy từ mục trending của GIPHY
Để lấy được data thì chúng ta cần truy cập vào GIPHY Developer

Chọn getstarted
Tạo một tài khoản, chúng ta có thể sử dụng facebook để đăng nhập mà không cần đăng ký tài khoản
Tiếp theo chọn Create An App , các bạn điền đầy đủ thông tin yêu cầu
GIPHY sẽ cung cấp cho chúng ta một API Key để sử dụng
Trên thanh menu chọn mục API Exploer
Ở mục Choose an endpoint bạn có thể lựa trending như mình
Copy đường dẫn từ mục Request Url, chúng ta sẽ sử dụng URL này để lấy data về. Bạn có thể truy cập thử địa chỉ này nó sẽ hiển thị một chuỗi JSON chứa Data GIPHY cung cấp. Củ thể ở đây là 25 hình ảnh gif ở mục trending của nó.

# Javascript

Mình sẽ code và giải thích chi tiết ngay phía dưới.

index.html

<!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>ex-03</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        #app {
            display: flex;
            flex-wrap: wrap;
        }
        
        .one-gif img {
            width: 120px;
        }
    </style>


</head>

<body>
    <div id="app">
         
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>  
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>
    <script src="script.js"></script>
</body>

</html>

Chúng ta sẽ sử dụng chung file index.html này cho cả javascript, jquery và vue js.

script.js

document.addEventListener('DOMContentLoaded', function() {
    let url = 'https://api.giphy.com/v1/gifs/trending?api_key=8Slm9KBGu3Cf4JpsfEV6QvVIag2mRfRq&limit=25&rating=G';
    const app = document.querySelector('#app');


    function appendNode(data) {

        data.forEach(function(gif) {
            let oneGif = document.createElement('div');
            oneGif.classList.add('one-gif');
            let gifImage = document.createElement('img');
            gifImage.src = gif.images.original.url;
            oneGif.append(gifImage);
            app.append(oneGif);

        })
    }

    function fetchGifs(url) {
        return fetch(url)
            .then(reponse => reponse.json())
            .then(data => data.data)
    }

    fetchGifs(url)
        .then(data => appendNode(data))

})

Ý tưởng thì hoàn toàn giống bài tập trước, tức là mình sẽ tạo ra các node và append các node đó vào html
Khởi tạo biến url gán với đường dẫn lúc tạo API Key ( có thể copy code ở trên cũng được ). Tạo biến app truy xuất element div#app
Tiếp theo khai báo function fetchGifs. Với ES6 để lấy được data từ server rất đơn giản, chỉ cần sử dụng Fetch API. Mình truyền vào url cho hàm fetch(url) thì nó sẽ trả về một Promise ( các bạn có thể tìm hiểu về API này bằng từ khóa fetch api js ). Ở then thứ nhất thì chúng ta sẽ return một Promise với giá trị resolve trả về là reponse.json() . Ở then tiếp theo thì mình sẽ trả về một Promise với giá trị resolve trả về là data.data bạn có thể console.log(data) để kiểm tra giá trị data trả về.
Tạo hàm appendNode với tham số truyền vào là data. Mình sẽ không giải thích hàm này nữa vì mình đã giải thích nó trong bài viết trước rồi.

# Jquery

$(function() {
    let url = 'https://api.giphy.com/v1/gifs/trending?api_key=8Slm9KBGu3Cf4JpsfEV6QvVIag2mRfRq&limit=25&rating=G';
    let allGif = '';
    $.get(url, function(data, status) {
        data = data.data;
        $.each(data, function(index, gif) {
            allGif += '<img src="' + gif.images.original.url + '">'
        });
        $('.all-gif').append(allGif);
    });

})

Với Jquery thì mình sẽ làm theo cách là nối thành một chuỗi allGifs = '<img src ="..."> <img src = " ... ">' rồi append vào <div class="all-gifs>.
Trong html tạo thêm một phần tử div có class = “all-gifs” để chứa các các ảnh gif lấy về
Mình sử dụng phương thức get của đối tượng Jquery để get data về sau đó lặp qua từng phần tử và nối vào chuỗi allGif.
Cuối cùng mình sẽ append thằng allGif này vào bên trong thằng <div class="all-gifs>

# Vue js

index.html

<!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>ex-03</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        #app {
            display: flex;
            flex-wrap: wrap;
        }
        
        .one-gif img {
            width: 120px;
        }
    </style>


</head>

<body>
    <div id="app">
         <div class="one-gif" v-if="gifs" v-for="gif in gifs">
            <img :src="gif.images.original.url">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.nethttps://nguyenvanhieu.vn/wp-admin/post-new.php#/npm/vue/dist/vue.js"> </script>  
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>
    <script src="script.js"></script>
</body>

</html>

Mình lại phải nói lại là chúng ta sẽ sử dụng template của Vue bằng cách thêm root element div#app

vue.js

new Vue({
    el: '#app',
    data: {
        url: 'https://api.giphy.com/v1/gifs/trending?api_key=8Slm9KBGu3Cf4JpsfEV6QvVIag2mRfRq&limit=25&rating=G',
        gifs: null
    },
    methods: {
        fetchGifs: function() {
                 fetch(this.url)
                .then((reponse) => reponse.json())
                .then(data => this.gifs = data.data)
        }
    },
    created: function() {
        this.fetchGifs();
    },

})

Đầu tiền thì chúng sẽ khơi tạo object Vue với option data truyền vào 2 thuộc tính url và gifs
Trong option methods tạo phương thức fetchGifs. Với Vue JS thường thì chúng ta sẽ sử dụng thư viện Axios để lấy dữ liệu. Nhưng ở đây thì mình sử dụng Fetch API như code js ở trên. Ở then thứ 2 thì mình sẽ gán thuộc tính this.gifs = data.data
Tiếp theo mình thêm hook created thì đây là một giai đoạn của Vue lifecyle . Nó xảy ra khi các option được khởi tạo. Các câu lệnh bên trong được tự động gọi, ở đây mình muốn gọi phương thức fetchGifs
Quay lại với template ở trên thì mình có sử dụng directive v-for để lặp ra tất cả giá trị của thằng gifs. Các bạn chú ý mình sử dụng v-if="gifs" để kiểm tra xem thằng gifs đã có data hay chưa. Lý do là vì fetch là một Promise bất đồng bộ thì nó cần thời gian để load hết data về. Khi mà template render thì thằng fetch này vẫn chưa chạy xong và thằng gifs = null. Đến khi gifs có được data (data changing) thì template lại được render và hiển thị các image gif. Nếu không sử dụng v-if="gifs" sẽ có lỗi xảy ra.

Vậy là mình đã xử lý xong bài tập 03 get json data, mình sẽ quay lại với những bài tập tiếp theo. Get json data

Xem bài viết tiếp theo tại đây.

4.5/5 - (2 bình chọn)

Yêu cầu:

Bài tập căn bản 03: Get JSON Data API GIPHY

Mô tả bài tập

# Javascript

index.html

script.js

# Jquery

# Vue js

index.html

vue.js

Bài viết liên quan

Reader Interactions

Để lại một bình luận Hủy