Hướng dẫn import/export json file javascript - nhập / xuất tệp json javascript

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ể tiêu thụ dữ liệu trong ứng dụng của bạn.

Nội dung chính ShowShow

• Cách đọc tệp JSON trong JavaScript với API tìm nạp
• Cách đọc tệp JSON trong JavaScript với câu lệnh nhập
• Làm thế nào sử dụng tệp dữ liệu JSON trong JavaScript?
• Làm cách nào để nhập tệp JSON vào tập lệnh?
• Làm cách nào để mở tệp JSON trong JavaScript?
• JSON có thể được chuyển đổi thành JavaScript không?

Trong một số tình huống, khi bạn 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 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 với API tìm nạp

Cách đọc tệp JSON trong JavaScript với câu lệnh nhập

Làm thế nào sử dụng tệp dữ liệu JSON trong JavaScript?

<!--./data.JSON-->

{
    "id": 1,
    "title": "Hello World",
    "completed": false
}

Làm cách nào để nhập tệp JSON vào tập lệnh?

<!--./index.js-->

fetch('./data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

Làm cách nào để mở tệp JSON trong JavaScript?

JSON có thể được chuyển đổi thành JavaScript không?

Trong một số tình huống, khi bạn 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 dữ liệu JSON này từ một tệp.

<!--./index.js-->

fetch('https://server.com/data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

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 với câu lệnh nhập

Làm thế nào sử dụng tệp dữ liệu JSON trong JavaScript?

Làm cách nào để nhập tệp JSON vào tập lệnh?

<!--./user.JSON-->

{
    "id": 1,
    "name": "John Doe",
    "age": 12
}

Làm cách nào để mở tệp JSON trong JavaScript?

<!---./index.js-->

import data from './data.json';
console.log(data);

JSON có thể được chuyển đổi thành JavaScript không?

Trong một số tình huống, khi bạn 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 dữ liệu JSON này từ một tệp.

Một phương thức tiêu chuẩn mà chúng ta có thể sử dụng để đọc tệp JSON (một tệp cục bộ hoặc một phương pháp được tải lên máy chủ) là với 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 ta có một tệp cục bộ trong thư mục của dự án có tên data.json có chứa dữ liệu JSON sau:

import data from './data.json' assert { type: 'JSON' };
console.log(data);

Bây giờ chúng ta có thể đọc tệp này trong JavaScript bằng phương thức API tìm nạp:

Ở 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 điều 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ột máy chủ cục bộ hoặc từ xa. Nếu chúng tôi sử dụng máy chủ trực tiếp trên IDE của chúng tôi, chúng tôi sẽ không gặp lỗi này. Nhưng khi chúng tôi tải tệp của mình trực tiếp, 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ố gắng đọc tệp này trong JavaScript. Cú pháp tương tự sẽ hoạt động:

API tìm nạp là phương thức 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.

Một phương pháp khác chúng ta có thể sử dụng ngoài việc thực hiện 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: