Hướng dẫn can javascript read json file? - javascript có thể đọc tập tin json không?

1. Nếu bạn muốn đọc tất cả thông tin trong tệp thì hãy sử dụng mã này bên dưới.

Zelo101

801 Huy hiệu bạc6 Huy hiệu đồng1 silver badge6 bronze badges

Đã trả lời ngày 2 tháng 3 năm 2017 lúc 8:59Mar 2, 2017 at 8:59

Syed Ayesha Bebesyed Ayesha BebeSyed Ayesha Bebe

1.7491 Huy hiệu vàng14 Huy hiệu bạc26 Huy hiệu đồng1 gold badge14 silver badges26 bronze badges

4

Bạn có thể nhập nó như mô -đun ES6;

Đã trả lời ngày 31 tháng 8 năm 2019 lúc 18:36Aug 31, 2019 at 18:36

Serhan C.Serhan C.Serhan C.

1,0021 Huy hiệu vàng12 Huy hiệu bạc10 Huy hiệu đồng1 gold badge12 silver badges10 bronze badges

3

Như nhiều người đã đề cập trước đây, điều này không hoạt động bằng cách sử dụng cuộc gọi AJAX. Tuy nhiên, có một cách xung quanh nó. Sử dụng phần tử đầu vào, bạn có thể chọn tệp của mình.

Tệp được chọn (.json) cần phải có cấu trúc này:

Sau đó, bạn có thể đọc tệp bằng JS với Filereader ():

Đã trả lời ngày 30 tháng 5 năm 2018 lúc 17:01May 30, 2018 at 17:01

SarahsarahSarah

4304 Huy hiệu bạc9 Huy hiệu đồng4 silver badges9 bronze badges

2

Rất đơn giản. Đổi tên tệp JSON của bạn thành ".js" thay vào đó ".json".
Rename your json file to ".js" instead ".json".

Vì vậy, hãy làm theo mã của bạn bình thường.

Tuy nhiên, chỉ để thông tin, nội dung JSON của tôi, nó trông giống như Snip bên dưới.

Đã trả lời ngày 21 tháng 6 năm 2018 lúc 21:09Jun 21, 2018 at 21:09

2

Tùy thuộc vào trình duyệt của bạn, bạn có thể truy cập vào các tệp cục bộ của bạn. Nhưng điều này có thể không hoạt động cho tất cả người dùng ứng dụng của bạn.

Để làm điều này, bạn có thể thử các hướng dẫn từ đây: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Khi tệp của bạn được tải, bạn có thể truy xuất dữ liệu bằng cách sử dụng:

Đã trả lời ngày 31 tháng 10 năm 2013 lúc 12:11Oct 31, 2013 at 12:11

Lauhublauhublauhub

88414 Huy hiệu bạc27 Huy hiệu đồng14 silver badges27 bronze badges

0

Nếu bạn đang sử dụng các tệp cục bộ, tại sao không chỉ gói dữ liệu dưới dạng đối tượng JS?

data.js

 var mydata = JSON.parse(data);
 alert(mydata[0].name);
 alert(mydata[0].age);
 alert(mydata[1].name);
 alert(mydata[1].age);

Không có xmlhttprequests, không phân tích cú pháp, chỉ sử dụng

let json = require('/Users/Documents/workspace/test.json');
console.log(json, 'the json obj');

Đã trả lời ngày 9 tháng 1 năm 2017 lúc 11:46Jan 9, 2017 at 11:46

user7394313user7394313user7394313

4744 Huy hiệu bạc4 Huy hiệu đồng4 silver badges4 bronze badges

1

Giải pháp 2021 (hoạt động trong Chrome 91+)

Tệp JS nơi bạn đang nhập tệp JSON phải là một mô -đun:

let json = require('/Users/Documents/workspace/test.json');
console.log(json, 'the json obj');

Sau đó, bên trong

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

Bạn có thể kiểm tra xem dữ liệu có được tải với

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

Nguồn

Đã trả lời ngày 8 tháng 8 năm 2021 lúc 8:16Aug 8, 2021 at 8:16

Vlad Volkovvlad VolkovVlad Volkov

1532 Huy hiệu bạc5 Huy hiệu Đồng2 silver badges5 bronze badges

4

Chỉ cần sử dụng $ .getJson và sau đó $ .each để lặp lại khóa /giá trị cặp. Ví dụ nội dung cho tệp JSON và mã chức năng:

 var mydata = JSON.parse(data);
 alert(mydata[0].name);
 alert(mydata[0].age);
 alert(mydata[1].name);
 alert(mydata[1].age);

Đã trả lời ngày 12 tháng 3 năm 2019 lúc 5:31Mar 12, 2019 at 5:31

Tất cả các giải pháp ở trên được đề cập sẽ chỉ hoạt động khi bạn có một máy chủ web địa phương chạy trên máy chủ cục bộ của bạn. Nếu bạn muốn đạt được điều này với máy chủ web, bạn có thể cần phải nỗ lực một số nỗ lực thủ công bằng cách tải lên tệp JSON bằng cách sử dụng điều khiển tải lên tệp. Trình duyệt sẽ không cung cấp chức năng này với máy chủ cục bộ vì rủi ro bảo mật.

Bạn cũng có thể phân tích tệp đã tải lên với một máy chủ web cục bộ. Dưới đây là mã mẫu tôi đã đạt được một giải pháp tương tự.

 var mydata = JSON.parse(data);
 alert(mydata[0].name);
 alert(mydata[0].age);
 alert(mydata[1].name);
 alert(mydata[1].age);

Trong trường hợp của tôi, tôi muốn đọc một tệp JSON cục bộ và hiển thị nó trong tệp HTML trên máy tính để bàn của tôi, đó là tất cả những gì tôi phải làm.

Lưu ý: Đừng cố gắng tự động hóa việc tải lên tệp bằng JavaScript, thậm chí điều đó cũng không được phép do các hạn chế bảo mật tương tự được áp dụng bởi các trình duyệt.

Đã trả lời ngày 18 tháng 12 năm 2020 lúc 14:26Dec 18, 2020 at 14:26

Ravikumar Bravikumar bRavikumar B

6291 Huy hiệu vàng11 Huy hiệu bạc18 Huy hiệu đồng1 gold badge11 silver badges18 bronze badges

Bạn có thể làm điều này với Fetch () với sự trợ giúp của Async đang chờ đợi. Đây là cách mới nhất và an toàn nhất để tìm nạp dữ liệu từ URL.

 var mydata = JSON.parse(data);
 alert(mydata[0].name);
 alert(mydata[0].age);
 alert(mydata[1].name);
 alert(mydata[1].age);

Bạn cũng có thể sử dụng điều này để tìm nạp dữ liệu từ URL bên ngoài.

Đã trả lời ngày 25 tháng 10 năm 2021 lúc 3:58Oct 25, 2021 at 3:58

3

Bạn có thể sử dụng phương thức xmlhttprequest ():

 var mydata = JSON.parse(data);
 alert(mydata[0].name);
 alert(mydata[0].age);
 alert(mydata[1].name);
 alert(mydata[1].age);

Bạn có thể thấy phản hồi của MyOBJ bằng cách sử dụng câu lệnh Console.log (nhận xét ra).

Nếu bạn biết angularjs, bạn có thể sử dụng $ http:

 var mydata = JSON.parse(data);
 alert(mydata[0].name);
 alert(mydata[0].age);
 alert(mydata[1].name);
 alert(mydata[1].age);

Nếu bạn có tệp trong một thư mục khác, hãy đề cập đến đường dẫn hoàn chỉnh thay vì tên tệp.

Đã trả lời ngày 4 tháng 9 năm 2017 lúc 7:34Sep 4, 2017 at 7:34

Maharshi Rawalmaharshi RawalMaharshi Rawal

2421 Huy hiệu vàng8 Huy hiệu bạc17 Huy hiệu đồng1 gold badge8 silver badges17 bronze badges

Vì bạn có một ứng dụng web, bạn có thể có máy khách và máy chủ.

Nếu bạn chỉ có trình duyệt của mình và bạn muốn đọc một tệp cục bộ từ JavaScript đang chạy trong trình duyệt của bạn, điều đó có nghĩa là bạn chỉ có một máy khách. Vì lý do bảo mật, trình duyệt không nên cho phép bạn làm điều đó.

Tuy nhiên, như Lauhub đã giải thích ở trên, điều này dường như có hiệu quả:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Giải pháp khác là thiết lập ở đâu đó trong máy của bạn, máy chủ web (nhỏ trong Windows hoặc Monkey trong Linux) và với thư viện XMLHTTPREQUEST hoặc D3, yêu cầu tệp từ máy chủ và đọc nó. Máy chủ sẽ tìm nạp tệp từ hệ thống tập tin cục bộ và phục vụ nó cho bạn thông qua web.

Đã trả lời ngày 9 tháng 5 năm 2015 lúc 8:39May 9, 2015 at 8:39

AntoniantoniAntoni

2.43418 Huy hiệu bạc21 Huy hiệu đồng18 silver badges21 bronze badges

Tôi thích những gì Stano/Meetar nhận xét ở trên. Tôi sử dụng nó để đọc các tập tin .json. Tôi đã mở rộng các ví dụ của họ bằng lời hứa. Đây là plunker cho cùng. https://plnkr.co/edit/panhe1xizwz7c0r3zvqx?p=preview

 var mydata = JSON.parse(data);
 alert(mydata[0].name);
 alert(mydata[0].age);
 alert(mydata[1].name);
 alert(mydata[1].age);

Việc đọc JSON có thể được chuyển vào một chức năng khác, cho khô; Nhưng ví dụ ở đây là nhiều hơn về việc thể hiện cách sử dụng lời hứa.

Đã trả lời ngày 5 tháng 1 năm 2017 lúc 5:48Jan 5, 2017 at 5:48

PlanktonplanktonPlankton

3883 Huy hiệu bạc13 Huy hiệu đồng3 silver badges13 bronze badges

1

Bạn phải tạo một phiên bản XMLHTTPRequest mới và tải nội dung của tệp JSON.

Mẹo này làm việc cho tôi (https://codepen.io/kryptonitedove/post/load-json-file-locally-using-pure-javascript):

 var mydata = JSON.parse(data);
 alert(mydata[0].name);
 alert(mydata[0].age);
 alert(mydata[1].name);
 alert(mydata[1].age);

Đã trả lời ngày 14 tháng 3 năm 2018 lúc 23:33Mar 14, 2018 at 23:33

Rodrigomelorodrigomelorodrigomelo

491 Huy hiệu vàng1 Huy hiệu bạc2 Huy hiệu đồng1 gold badge1 silver badge2 bronze badges

1

Bạn có thể sử dụng D3.js để nhập các tệp JSON. Chỉ cần gọi D3 trên cơ thể HTML của bạn:

 var mydata = JSON.parse(data);
 alert(mydata[0].name);
 alert(mydata[0].age);
 alert(mydata[1].name);
 alert(mydata[1].age);

Sau đó, hãy đặt cái này vào tập lệnh JS của bạn:

 var mydata = JSON.parse(data);
 alert(mydata[0].name);
 alert(mydata[0].age);
 alert(mydata[1].name);
 alert(mydata[1].age);

Đã trả lời ngày 23 tháng 7 năm 2020 lúc 15:02Jul 23, 2020 at 15:02

MMDFLMMDFLmmdfl

518 Huy hiệu Đồng8 bronze badges

Sử dụng

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

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);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

Đã trả lời ngày 22 tháng 3 năm 2021 lúc 20:35Mar 22, 2021 at 20:35

Malekmalekmalek

9241 Huy hiệu vàng10 Huy hiệu bạc16 Huy hiệu đồng1 gold badge10 silver badges16 bronze badges

Chỉ muốn cung cấp một phương pháp khác vì tất cả ở trên trông quá phức tạp với tôi. Làm việc cho tôi trên phiên bản Chrome 95.0.4638.54 của tôi.

Chỉ cần mã JS nhanh chóng và bẩn

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);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

Kiểm tra JSON:

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);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

Đã trả lời ngày 3 tháng 11 năm 2021 lúc 15:26Nov 3, 2021 at 15:26

Biến tệp JSON thành tệp .js và gán JSON cho một biến hoặc const, sau đó tham khảo nó trong tệp JavaScript chính của bạn.

Đã trả lời ngày 6 tháng 12 năm 2021 lúc 13:49Dec 6, 2021 at 13:49

2

Bạn có thể sử dụng D3 để xử lý cuộc gọi lại và tải tệp JSON cục bộ

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

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);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

Đã trả lời ngày 30 tháng 11 năm 2017 lúc 7:47Nov 30, 2017 at 7:47

AlexalexAlex

Huy hiệu vàng 11K66 gold badges61 silver badges71 bronze badges

Một cách giải quyết đơn giản là đặt tệp JSON của bạn vào bên trong một máy chủ đang chạy cục bộ. vì điều đó từ thiết bị đầu cuối, hãy đến thư mục dự án của bạn và khởi động máy chủ cục bộ trên một số cổng, ví dụ 8181

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);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

Sau đó, duyệt đến http: // localhost: 8181/sẽ hiển thị tất cả các tệp của bạn bao gồm cả JSON. Hãy nhớ cài đặt Python nếu bạn chưa có.

Đã trả lời ngày 14 tháng 4 năm 2018 lúc 11:27Apr 14, 2018 at 11:27

Ewalelewalelewalel

1.79419 huy hiệu bạc24 Huy hiệu đồng19 silver badges24 bronze badges

Tôi đã nhận câu trả lời tuyệt vời của Stano và kết thúc một lời hứa. Điều này có thể hữu ích nếu bạn không có tùy chọn như Node hoặc WebPack để quay lại để tải tệp JSON từ hệ thống tệp:

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);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

Bạn có thể gọi nó như thế này:

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);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

Đã trả lời ngày 13 tháng 9 năm 2018 lúc 15:48Sep 13, 2018 at 15:48

Ewilanewilanewilan

6186 Huy hiệu bạc15 Huy hiệu Đồng6 silver badges15 bronze badges

Tôi đã đọc những điều trên và thông báo rằng thường trong các dự án mà ai đó muốn có nhiều tệp JSON được tải. Trong một số trường hợp, Gazilion và trong một số trường hợp "thư mục của các tệp JSON" (trong đó bạn sẽ phải tạo một danh sách trước tiên để có thể tải xuống từng danh sách). Nó nhận được lộn xộn nếu đây là tất cả các dự án. Và nó có thể là một rắc rối nếu có nhiều mối quan hệ giữa dữ liệu trong các tệp JSON.

Rõ ràng tất cả có thể được thực hiện với các phương thức trên, hoặc tạo các tệp .JS hoặc truy xuất chúng thông qua một số loại tìm nạp cục bộ.

Tuy nhiên, một giải pháp thay thế (nếu bạn không muốn một giải pháp phụ máy chủ với các tầng) mà tôi thấy hữu ích là trước tiên để tải tất cả dữ liệu của bạn trong cơ sở dữ liệu SQL Lite. Điều này giúp quản lý nhiều dữ liệu hơn cũng dễ dàng hơn một chút và bạn chỉ có một tệp với tất cả dữ liệu của mình, v.v.

Sau đó, bạn sử dụng lắp ráp web để tải cơ sở dữ liệu SQLite của mình và sau đó bạn có thể sử dụng các truy vấn thông thường để truy vấn phía máy khách dữ liệu của mình. Vì vậy, tất cả điều này đều có thể được thực hiện phía máy khách

Dưới đây là một ví dụ: https://github.com/projectje/bookmarks-sync-sql-cogmios/blob/master/src/html/index.ts (tệp TypeScript được biên dịch cho giải pháp máy khách-side).

Trong một trang web đọc/ghi, bạn có thể cung cấp cơ sở dữ liệu SQLite cho mỗi người dùng rằng bạn lưu trữ để dữ liệu là duy nhất cho người dùng đó, v.v.

Tham khảo: https://github.com/sql-js/sql.js

Đã trả lời ngày 16 tháng 1 lúc 10:43Jan 16 at 10:43

Delwateredelwateredelwater

2.4626 Huy hiệu vàng36 Huy hiệu bạc61 Huy hiệu Đồng6 gold badges36 silver badges61 bronze badges

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

JSON có thể được sử dụng trong JavaScript không?

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

Tất cả JSON có hợp lệ JavaScript không?