Khi tìm nạp dữ liệu từ các nguồn hoặc máy chủ bên ngoài, bạn cần đảm bảo rằng dữ liệu được trả về ở định dạng JSON. Sau đó, bạn có thể sử dụng dữ liệu trong ứng dụng của mình.
Trong một số trường hợp, khi bạn đang làm việc cục bộ hoặc khi bạn tải tệp dữ liệu lên máy chủ, chúng tôi có thể muốn đọc những dữ liệu JSON này từ một tệp.
Chúng ta sẽ học cách làm điều đó trong hướng dẫn này.
Cách đọc tệp JSON trong JavaScript bằng API tìm nạp
Một phương pháp tiêu chuẩn mà chúng ta có thể sử dụng để đọc tệp JSON (tệp cục bộ hoặc tệp được tải lên máy chủ) là sử dụng API tìm nạp. Nó sử dụng cùng một cú pháp cho cả hai. Sự khác biệt duy nhất sẽ là URL.
Ví dụ: giả sử chúng tôi có một tệp cục bộ trong thư mục của dự án có tên data.json chứa dữ liệu JSON sau:
<!--./data.JSON-->
{
"id": 1,
"title": "Hello World",
"completed": false
}
Bây giờ chúng ta có thể đọc tệp này bằng JavaScript bằng phương thức Fetch API:
<!--./index.js-->
fetch('./data.json')
.then((response) => response.json())
.then((json) => console.log(json));
Ở phần trên, chúng tôi đã có thể đọc một tệp JSON cục bộ. Nhưng thật không may, khi chúng tôi chạy cái này trong trình duyệt, chúng tôi có thể gặp lỗi CORS sau vì tệp của chúng tôi không có trên máy chủ:
Để khắc phục điều này, chúng tôi sẽ đảm bảo rằng tệp JSON của chúng tôi nằm trên máy chủ cục bộ hoặc máy chủ từ xa. Nếu chúng tôi sử dụng máy chủ Trực tiếp trên IDE của mình, chúng tôi sẽ không gặp phải lỗi này. Nhưng khi chúng tôi tải trực tiếp tệp của mình, chúng tôi sẽ gặp lỗi này.
Như tôi đã nói trước đó, giả sử chúng ta có tệp JSON này trên một máy chủ từ xa và đang cố đọc tệp này bằng JavaScript. Cú pháp tương tự sẽ hoạt động:
<!--./index.js-->
fetch('https://server.com/data.json')
.then((response) => response.json())
.then((json) => console.log(json));
API tìm nạp là phương pháp thích hợp hơn để sử dụng khi chúng tôi muốn đọc tệp JSON từ máy chủ bên ngoài hoặc tệp cục bộ vào tệp JavaScript của chúng tôi.
Cách đọc tệp JSON trong JavaScript với Câu lệnh nhập
Một phương pháp khác mà chúng ta có thể sử dụng ngoài việc thực hiện một yêu cầu HTTP là câu lệnh nhập. Phương pháp này có một vài biến chứng, nhưng chúng tôi sẽ giải quyết tất cả.
Giống như trong phần trước, giả sử chúng ta có tệp JSON chứa dữ liệu người dùng, chẳng hạn như user.json:
<!--./user.JSON-->
{
"id": 1,
"name": "John Doe",
"age": 12
}
Chúng ta có thể đọc dữ liệu JSON này bằng JavaScript bằng cách sử dụng câu lệnh nhập theo cách này:
<!---./index.js-->
import data from './data.json';
console.log(data);
Thật không may, điều này sẽ gây ra lỗi cho biết chúng tôi không thể sử dụng câu lệnh nhập bên ngoài mô-đun. Đây là một lỗi tiêu chuẩn khi chúng tôi cố gắng sử dụng import câu lệnh trong một tệp JavaScript thông thường, đặc biệt dành cho các nhà phát triển mới sử dụng JavaScript.
Để khắc phục điều này, chúng ta có thể thêm type="module" script trong tệp HTML của chúng tôi, nơi chúng tôi đã tham chiếu tệp JavaScript, như sau:
<html lang="en">
// ...
<body>
<script type="module" src="https://www.freecodecamp.org/news/how-to-read-json-file-in-javascript/./index.js"></script>
</body>
</html>
Khi chúng tôi làm điều này, chúng tôi vẫn gặp một lỗi khác:
Để khắc phục lỗi này, chúng tôi cần thêm loại tệp JSON vào câu lệnh nhập và sau đó chúng tôi sẽ có thể đọc tệp JSON của mình bằng JavaScript:
import data from './data.json' assert { type: 'JSON' };
console.log(data);
Điều này hoạt động hoàn hảo miễn là chúng tôi chạy các tệp của mình trên máy chủ cục bộ hoặc máy chủ từ xa. Nhưng giả sử chúng ta chạy cái này cục bộ – thì chúng ta sẽ gặp lỗi CORS.
kết thúc
Trong bài viết này, chúng ta đã học cách đọc tệp JSON trong JavaScript và các lỗi có thể gặp phải khi sử dụng từng phương thức.
Tốt nhất là sử dụng phương thức API tìm nạp khi bạn muốn thực hiện một yêu cầu HTTP. Ví dụ: giả sử chúng tôi đang tìm nạp dữ liệu từ một tệp JSON giả mà cuối cùng chúng tôi sẽ lấy từ một API.
Tuy nhiên, trong trường hợp chúng tôi không cần sử dụng yêu cầu HTTP, chúng tôi có thể sử dụng câu lệnh nhập. Chúng ta có thể sử dụng câu lệnh nhập khi chúng ta sử dụng một thư viện như React, Vue, v.v. liên quan đến các mô-đun. Điều này có nghĩa là chúng tôi sẽ không cần thêm loại mô-đun và đồng thời, chúng tôi sẽ không cần thêm loại tệp.
Cả hai phương pháp đều không yêu cầu bạn phải cài đặt gói hoặc sử dụng thư viện vì chúng có sẵn. Chọn phương pháp nào để sử dụng là hoàn toàn tùy thuộc vào bạn.
Nhưng một mẹo nhanh giúp phân biệt các phương pháp này là API Tìm nạp đọc tệp JSON trong JavaScript bằng cách gửi yêu cầu HTTP, trong khi câu lệnh nhập không yêu cầu bất kỳ yêu cầu HTTP nào mà hoạt động giống như mọi lần nhập khác mà chúng tôi thực hiện.
