Cách đọc file Json bằng Javascript thuần

0

Bài viết này sẽ hướng dẫn bạn cách đọc dữ liệu từ file Json bằng Javascript thuần. Chúng ta sẽ không dùng Jquery hay bất cứ thư viện nào bên ngoài.

Đầu tiên, bạn chuẩn bị file test.json có nội dung đơn giản như sau:

{"name":"Maria Ozawa","age":40,"adress":"Takadada City"}

Tiếp đó, tạo 1 file là index.html (cùng thư mục với file test.json) với nội dung như sau:

<html>
<head>
    <script type="text/javascript" src="json.js"></script>
</head>
<body>
    
</body>
</html>

File cuối cùng và cũng là phần công việc khó khăn nhất chính là file json.js

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

// Chạy thử
readTextFile("test.json", function (text) {
    var data = JSON.parse(text);
    alert(data.name);
});

Bây giờ bạn hãy chạy file index.html bằng Chrome. Kết quả sẽ là 1 hộp thông báo (alert) với nội dung là “Maria Ozawa”. Nếu bạn đặt file json trong thư mục khác thì hãy nhớ lưu ý đường dẫn nhé.

BÌNH LUẬN

Please enter your comment!
Please enter your name here