Lấy dữ liệu api javascript

Question

Như ở đề bài đã nói là dùng

ng serve --open

8 để lấy dữ liệu từ

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

2 thì tất nhiên là phải cần đến

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

2 và dự án

ng serve --open

8 rồi

api

Mình sẽ sử dụng mockpi để tạo api nhé mọi người vào đây tạo dự án mới ấn

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

5 đặt tên cho

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

6 rồi thêm các trường, kiểu dữ liệu, cuối cùng ấn

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

7, sau đó ấn vào tên

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

6 để nó hiển thị . Vậy là chúng ta đã tạo được data, Nhưng các bạn chỉ cần quan tâm đến địa chỉ trên URL để tí còn dùng đến.

góc cạnh

Thế là đã xử lý xong bên

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

2 bây giờ chuyển sang

ng generate service product

0. Để cài đặt

ng generate service product

0 trước hết chúng ta phải cài đặt

ng generate service product

2. Các bạn có thể lên trang chủ để cài đặt

ng generate service product

2 tại đây. Sau khi cài xong

ng generate service product

2 thì đến lúc cài đặt

ng serve --open

8 bằng lệnh

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

5

Tiếp theo là tạo một dự án mới

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

6

with

ng generate service product

6 is the project name that you want to set next to the cd to project just doing command

ng serve --open

Add --open để có thể tự động mở trình duyệt của bạn đến

ng generate service product

7. Nó sẽ giống như thế này

.

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

05theo dõi sự thay đổi của dữ liệu để thực hiện một hàm nào đó và cuối cùng là nhập lớp

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

06 từ các mô hình bên

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

2

quy định kiểu trả về của dữ liệu ở đây là kiểu

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

07

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

4

tạo 1 biến là

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

08 chính là đường dẫn khi chúng ta tạo api trên mockapi

Tiếp theo là

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

6

lớp

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

09 với phương thức khởi tạo và hàm

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

20 với phương thức

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

21 để lấy dữ liệu từ đường dẫn

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

08. Như đã nói ở trên mình đã tạo thêm thành phần để thực hiện chức năng tải danh sách sản phẩm và xem chi tiết, bây giờ chúng ta cùng vào thư mục

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

23 của thành phần

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

24

ng serve --open

3

Ở đây mình cũng nhập dịch vụ

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

09 ở bên mình vừa tạo mô hình bên trên và bên

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

06, tiếp theo là gán dữ liệu bằng một mảng

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

01 trống. Hàm khởi tạo

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

28. Tạo một phương thức

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

20 gọi đến phương thức

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

20 bên

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

28 và

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

42 sẽ được gán bằng dữ liệu trả về của hàm

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

20. Tiếp theo sẽ là phần hiển thị dữ liệu được lấy lên để xem, chúng ta sẽ vào tệp

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

44 để tiến hành kết xuất dữ liệu ra. Chúng ta sẽ sử dụng

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

45 để tải ra danh sách sản phẩm

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

60

khai báo một biến mục thuộc mảng

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

42 chúng ta đã lấy được ở bên tệp

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

23, chỉ cần mục. (thuộc tính tên) muốn hiển thị là được, nhớ là phải đặt trong dấu {{}}. Như vậy là xong rồi, hơi xấu mong mọi người thông cảm nhé.

Tiếp theo mình sẽ làm thêm chức năng xem chi tiết sản phẩm

Để xem được chi tiết sản phẩm thì mình phải lấy id của nó vì thế phần

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

48 sẽ khác một chút so với phần

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

48 của danh sách sản phẩm

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

61

dòng trên là định tuyến của danh sách sản phẩm còn phần dưới là của chi tiết sản phẩm. các bạn nhớ là phải import 2 thành phần

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

60 và

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

61 vào nhé. Ở bên

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

62 cũng xây dựng một hàm find() để lấy id tương tự như hàm

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

20 bên trên

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

62

Tiếp theo sẽ là vào tệp

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

64 của thành phần

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

65

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

63

Cũng tương tự như bên

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

23 nhưng thay vì gọi đến

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

20 và trả về một mảng dữ liệu thì

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

64 gọi đến

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

69 và dữ liệu trả về là một đối tượng. Bây giờ chúng ta chỉ cần sang tệp

ng serve --open

30 để hiển thị thông tin sản phẩm phầm vừa lấy được. Thay vì phải tạo một biến

ng serve --open

31 thuộc mảng

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

42 như bên danh sách sản phẩm thì chúng ta chỉ cần

ng serve --open

33 muốn hiển thị là được. À các bạn nhớ thêm

ng serve --open

34 vào thẻ

ng serve --open

35 ở bên file

export class Product{
    id:number;
    name:string;
    price: number;
    quantity: number;
    img: string;
    description: string;
}

44 nữa nhé để khi click vào 1 sản phẩm thì sẽ vào được trang chi tiết của sản phẩm đó. Đây là kết quả của trang chi tiết sản phẩm

Kết luận

Như vậy là mình đã giới thiệu cho các bạn bằng cách lấy dữ liệu từ api bằng

ng generate service product

0 hiện ra trang danh sách sản phẩm và trang chi tiết sản phẩm. Còn những phần thêm, sửa, xóa sản phẩm nếu các bạn quan tâm thì hãy comment cho mình biết để mình có thể làm ở bài tiếp theo. Các bạn có thắc mắc hay bổ sung gì thì comment xuống bên dưới để mình được biết nhé. Cảm ơn các bạn

programming javascript

Lấy dữ liệu api javascript

api

góc cạnh

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội