Làm cách nào để đọc tệp JSON cục bộ bên ngoài trong JavaScript?

Tôi đã lưu một tệp JSON trong hệ thống cục bộ của mình và tạo một tệp JavaScript để đọc tệp JSON và in dữ liệu ra. Đây là tệp JSON:

{"resource":"A","literals":["B","C","D"]}

Giả sử đây là đường dẫn của tệp JSON : /Users/Documents/workspace/test.json.

Ai đó có thể vui lòng giúp tôi viết một đoạn mã đơn giản để đọc tệp JSON và in dữ liệu bằng JavaScript không?

Bạn không thể thực hiện cuộc gọi AJAX đến tài nguyên cục bộ vì yêu cầu được thực hiện bằng HTTP.

Một cách giải quyết là chạy một máy chủ web cục bộ, phục vụ tệp và thực hiện cuộc gọi AJAX đến localhost.

Về mặt giúp bạn viết mã để đọc JSON, bạn nên đọc tài liệu cho jQuery.getJSON():

http://api.jquery.com/jQuery.getJSON/

Để đọc tệp JSON cục bộ bên ngoài (data.json) bằng javascript, trước tiên hãy tạo tệp data.json của bạn:

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

1. Đề cập đường dẫn của tệp json trong nguồn tập lệnh cùng với tệp javascript.

   <script type="text/javascript" src="data.json"></script>
   <script type="text/javascript" src="javascrip.js"></script>

2. Lấy đối tượng từ tệp json

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

Để biết thêm thông tin, xem tài liệu tham khảo này .

Việc tải một .jsontệp từ đĩa cứng là một hoạt động không đồng bộ và do đó nó cần chỉ định một hàm gọi lại để thực thi sau khi tệp được tải.

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

Hàm này cũng hoạt động để tải một .htmlhoặc .txtcác tệp, bằng cách ghi đè tham số loại mime "text/html", "text/plain"v.v.

Khi ở trong Node.js hoặc khi sử dụng allow.js trong trình duyệt , bạn chỉ cần làm:

let json = require('/Users/Documents/workspace/test.json');

Lưu ý: tệp được tải một lần, các cuộc gọi tiếp theo sẽ sử dụng bộ đệm.

1. Đầu tiên, tạo một tập tin json. Trong ví dụ này, tập tin của tôi là words.json

[{"name":"ay","id":"533"},
{"name":"kiy","id":"33"},
{"name":"iy","id":"33"},
{"name":"iy","id":"3"},
{"name":"kiy","id":"35"},
{"name":"kiy","id":"34"}]

2. Và đây là mã của tôi, tức là node.js. Lưu ý 'utf8'đối số readFileSync: điều này làm cho nó trả về không phải là một Buffer(mặc dù JSON.parsecó thể xử lý nó), mà là một chuỗi. Tôi đang tạo một máy chủ để xem kết quả ...

var fs=require('fs');
var data=fs.readFileSync('words.json', 'utf8');
var words=JSON.parse(data);
var bodyparser=require('body-parser');
console.log(words);
var express=require('express');

var app=express();

var server=app.listen(3030,listening);

function listening(){
console.log("listening..");
}
app.use(express.static('website'));
app.use(bodyparser.urlencoded({extended:false}));
app.use(bodyparser.json());

3. Khi bạn muốn đọc chi tiết id cụ thể, bạn có thể đề cập đến mã như ..

 app.get('/get/:id',function(req,res){
	
var i;
		 
 for(i=0;i<words.length;++i)
 {
 if(words[i].id==req.params.id){
 res.send(words[i]);
 }
}
console.log("success");
	  
});

4. Khi bạn nhập url vì localhost:3030/get/33nó sẽ cung cấp các chi tiết liên quan đến id đó .... và bạn cũng đọc theo tên. Tệp json của tôi có tên simillar với mã này, bạn có thể nhận được một chi tiết tên .... và nó không in tất cả các tên simillar

 app.get('/get/:name',function(req,res){
	
var i;
		 
 for(i=0;i<words.length;++i)
 {
 if(words[i].id==req.params.name){
 res.send(words[i]);
 }
}
console.log("success");
	  
});

5. Và nếu bạn muốn đọc chi tiết tên simillar, bạn có thể sử dụng mã này.

app.get('/get/name/:name',function(req,res){
word = words.filter(function(val){
  return val.name === req.params.name;
});
res.send(word);
			 
 console.log("success");
	  
});

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

app.get('/all',sendAll);
 
 function sendAll(request,response){
 response.send(words);

 }
 

Sử dụng API tìm nạp là giải pháp đơn giản nhất:

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

Nó hoạt động hoàn hảo trong Firefox, nhưng trong Chrome, bạn phải tùy chỉnh cài đặt bảo mật.

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 có cấu trúc này:

[
    {"key": "value"},
    {"key2": "value2"},
    ...
    {"keyn": "valuen"},
]

<input type="file" id="get_the_file">

Sau đó, bạn có thể đọc tệp bằng cách sử dụng JS với FileReader ():

document.getElementById("get_the_file").addEventListener("change", function() {
  var file_to_read = document.getElementById("get_the_file").files[0];
  var fileread = new FileReader();
  fileread.onload = function(e) {
    var content = e.target.result;
    // console.log(content);
    var intern = JSON.parse(content); // Array of Objects.
    console.log(intern); // You can index every object
  };
  fileread.readAsText(file_to_read);
});

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 mình. 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:

var jsonData = JSON.parse(theTextContentOfMyFile);

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

data.js

MyData = { resource:"A",literals:["B","C","D"]}

Không có XMLHttpRequests , không phân tích cú pháp, chỉ cần sử dụng MyData.resourcetrực tiếp

Rất đơn giản.
Đổi tên tệp json của bạn thành ".js" thay vì ".json".

<script type="text/javascript" src="my_json.js"></script>

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

<script type="text/javascript">
var obj = JSON.parse(contacts);

Tuy nhiên, chỉ để biết thông tin, nội dung của tôi trông giống như đoạn trích dưới đây.

contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';

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

import data from "/Users/Documents/workspace/test.json"

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

    {
        {
            "key": "INFO",
            "value": "This is an example."
        }
    }

    var url = "file.json";         
    $.getJSON(url, function (data) {
        $.each(data, function (key, model) {
            if (model.key == "INFO") {
                console.log(model.value)
            }
        })
    });

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

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        //console.log("Json parsed data is: " + JSON.stringify(myObj));
       }
    };
xmlhttp.open("GET", "your_file_name.json", true);
xmlhttp.send();

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).

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

MyController.$inject = ['myService'];
function MyController(myService){

var promise = myService.getJsonFileContents();

  promise.then(function (response) {
    var results = response.data;
    console.log("The JSON response is: " + JSON.stringify(results));
})
  .catch(function (error) {
    console.log("Something went wrong.");
  });
}

myService.$inject = ['$http'];
function myService($http){

var service = this;

  service.getJsonFileContents = function () {
    var response = $http({
      method: "GET",
      url: ("your_file_name.json")
    });

    return response;
  };
}

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

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

Nếu bạn chỉ có trình duyệt của mình và bạn muốn đọc tệp cục bộ từ javascript đang chạy trong trình duyệt của mình, điều đó có nghĩa là bạn chỉ có một ứng dụng 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ư hoạt động:

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

Giải pháp khác là thiết lập một nơi nào đó trong máy của bạn một máy chủ web (nhỏ trong windows hoặc khỉ 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 cục bộ và cung cấp cho bạn thông qua web.

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 cách sử dụng Promise. Đây là plunker cho cùng. https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview

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("DATA.json", function(text){
//     var data = JSON.parse(text);
//     console.log(data); 
// });


var task1 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA.json", function(text){
    var data = JSON.parse(text);
    console.log('task1 called');
    console.log(data);
    resolve('task1 came back');
    }); 
  });
};

var task2 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA2.json", function(text){
    var data2 = JSON.parse(text);
    console.log('task2 called');
    console.log(data2);
    resolve('task2 came back');
    });
  });
}

Promise.race([task1(), task2()])
       .then(function(fromResolve){
          console.log(fromResolve); 
       });

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

Bạn phải tạo một cá thể XMLHttpRequest mới và tải nội dung của tệp json.

Mẹo này hoạt động với tôi ( https://codepen.io/KryptoniteDove/post/load-json-file-locally-USE-pure-javascript ):

 function loadJSON(callback) {   

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }

 loadJSON(function(response) {
    // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
 });

Một cách giải quyết đơn giản là đặt tệp JSON của bạn vào máy chủ đang chạy cục bộ. cho rằng từ thiết bị đầu cuối đi đế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ố số cổng, ví dụ 8181

python -m SimpleHTTPServer 8181

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 JSON. Hãy nhớ cài đặt python nếu bạn chưa có.

Nếu bạn có thể chạy một máy chủ web cục bộ (như Chris P đã đề xuất ở trên) và nếu bạn có thể sử dụng jQuery, bạn có thể thử http://api.jquery.com/jQuery.getJSON/

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ộ data.json, như sau:

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>
  d3.json("data.json", function(error, data) {
    if (error)
      throw error;
    console.log(data);
  });
</script>

Tôi lấy câu trả lời xuất sắc của Stano và gói nó trong 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ư nút hoặc gói web để quay lại tải tệp json từ hệ thống tệp:

// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) => 
  new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = resolve;
    request.onerror = reject;
    request.overrideMimeType("application/json");
    request.open(options.method, file, true);
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === "200") {
            resolve(request.responseText);
        }
    };
    request.send(null);
});

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

readFileP('<path to file>')
    .then(d => {
      '<do something with the response data in d.srcElement.response>'
    });

Vì vậy, nếu bạn dự định sử dụng "Apache Tomcat" để lưu trữ tệp JSON của mình,

1> Sau khi khởi động máy chủ, hãy xác minh rằng Tomcat Apache của bạn đã hoạt động và chạy bằng cách truy cập url này: "localhost: 8080" -

2> Tiếp theo, đi tới thư mục "webapps" - "C: \ Program Files \ Apache Software Foundation \ Tomcat 8.5 \ webapps". Và, tạo một thư mục dự án hoặc sao chép thư mục dự án của bạn.

3> Dán tập tin json của bạn ở đó.

4> Và đó là nó. Bạn xong việc rồi! Chỉ cần truy cập - " http: // localhost: 8080 / $ project_name $ / $ jsonFile_name $ .json"