Hướng dẫn how to import json data to javascript - cách nhập dữ liệu json sang 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.

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

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:

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

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:

fetch['./data.json']
    .then[[response] => response.json[]]
    .then[[json] => console.log[json]];

Ở 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:

fetch['//server.com/data.json']
    .then[[response] => response.json[]]
    .then[[json] => console.log[json]];

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.

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

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:

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

Chúng ta có thể đọc dữ liệu JSON này trong JavaScript bằng cách sử dụng câu lệnh nhập theo cách này:

import data from './data.json';
console.log[data];

Thật không may, điều này sẽ gây ra một lỗi nói rằng chúng tôi không thể sử dụng câu lệnh nhập bên ngoài một mô -đun. Đây là một lỗi tiêu chuẩn khi chúng tôi cố gắng sử dụng câu lệnh import trong tệp JavaScript thông thường, đặc biệt là đối với các nhà phát triển mới sử dụng JavaScript.

Để khắc phục điều này, chúng tôi có thể thêm thẻ tập lệnh

fetch['./data.json']
    .then[[response] => response.json[]]
    .then[[json] => console.log[json]];

    // ...
    
        
    

Khi chúng tôi làm điều này, chúng tôi vẫn sẽ 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 chúng tôi trong 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 chúng tôi trên một máy chủ cục bộ hoặc từ xa. Nhưng giả sử chúng tôi chạy điều này tại địa phương - sau đó chúng tôi sẽ gặp lỗi CORS.

Gói lên

Trong bài viết này, chúng tôi đã học được cách đọc tệp JSON trong JavaScript và các lỗi có thể có chúng tôi có thể gặp 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 yêu cầu HTTP. Ví dụ: giả sử chúng ta đang tìm nạp dữ liệu từ tệp JSON giả mà cuối cùng chúng ta sẽ lấy từ API.

Tuy nhiên, trong tình huống mà chúng ta không cần sử dụng yêu cầu HTTP, chúng ta 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 thư viện như React, Vue, v.v. Điều này có nghĩa là chúng tôi sẽ không cần thêm loại mô -đun, và ngoài ra, chúng tôi sẽ không cần thêm loại tệp.

Không phương thức nào yêu cầu bạn cài đặt gói hoặc sử dụng thư viện vì chúng được xây dựng. 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 để phân biệt các phương thức 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à là hoạt động như mọi nhập khẩu khác chúng tôi thực hiện.