วิธีอ่านไฟล์ JSON ในระบบภายนอกใน JavaScript

ฉันบันทึกไฟล์ JSON ในระบบโลคัลของฉันและสร้างไฟล์ JavaScript เพื่ออ่านไฟล์ JSON และพิมพ์ข้อมูลออกมา นี่คือไฟล์ JSON:

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

สมมติว่านี้เป็นเส้นทางของไฟล์ JSON /Users/Documents/workspace/test.jsonนี้:

ใครช่วยกรุณาช่วยฉันในการเขียนรหัสง่าย ๆ เพื่ออ่านไฟล์ JSON และพิมพ์ข้อมูลใน JavaScript?

คุณไม่สามารถโทร AJAX ไปยังทรัพยากรท้องถิ่นเนื่องจากมีการร้องขอโดยใช้ HTTP

วิธีแก้ปัญหาคือการเรียกใช้เว็บเซิร์ฟเวอร์ในพื้นที่ให้บริการไฟล์และโทร AJAX ไปที่ localhost

ในแง่ของการช่วยคุณเขียนโค้ดเพื่ออ่าน JSON คุณควรอ่านเอกสารประกอบสำหรับjQuery.getJSON():

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

สำหรับการอ่านไฟล์ JSON ภายในเครื่อง (data.json) ภายนอกโดยใช้ javascript ขั้นแรกให้สร้างไฟล์ data.json ของคุณ:

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

1. ระบุพา ธ ของไฟล์ json ในซอร์สสคริปต์พร้อมกับไฟล์ javascript

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

2. รับ Object จากไฟล์ json

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

สำหรับข้อมูลเพิ่มเติมดูการอ้างอิงนี้

การโหลด.jsonไฟล์จาก harddisk เป็นการดำเนินการแบบอะซิงโครนัสดังนั้นจึงจำเป็นต้องระบุฟังก์ชันการเรียกกลับเพื่อดำเนินการหลังจากโหลดไฟล์แล้ว

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

ฟังก์ชั่นนี้ทำงานยังสำหรับการโหลด.htmlหรือ.txtไฟล์โดยเอาชนะพารามิเตอร์ชนิดละครใบ้เพื่อ"text/html", "text/plain"ฯลฯ

เมื่ออยู่ใน Node.js หรือเมื่อใช้ require.js ในเบราว์เซอร์คุณสามารถทำได้ง่ายๆ:

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

หมายเหตุ: ไฟล์ถูกโหลดหนึ่งครั้งการโทรที่ตามมาจะใช้แคช

1. ก่อนอื่นให้สร้างไฟล์ json ในตัวอย่างนี้ไฟล์ของฉันคือ 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. และนี่คือรหัสของฉันเช่น, node.js หมายเหตุ'utf8'อาร์กิวเมนต์ถึงreadFileSync: สิ่งนี้ทำให้ส่งคืนไม่ใช่Buffer(แม้ว่าJSON.parseสามารถจัดการได้) แต่เป็นสตริง ฉันกำลังสร้างเซิร์ฟเวอร์เพื่อดูผลลัพธ์ ...

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. เมื่อคุณต้องการอ่านรายละเอียดรหัสเฉพาะคุณสามารถพูดถึงรหัสเป็น ..

 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. เมื่อคุณป้อน url localhost:3030/get/33มันจะให้รายละเอียดที่เกี่ยวข้องกับ id .... และคุณอ่านด้วยชื่อ ไฟล์ json ของฉันมีชื่อ simillar ด้วยรหัสนี้คุณสามารถรับรายละเอียดหนึ่งชื่อ .... และมันไม่ได้พิมพ์ชื่อ 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. และถ้าคุณต้องการอ่านรายละเอียดชื่อ simillar คุณสามารถใช้รหัสนี้

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. หากคุณต้องการอ่านข้อมูลทั้งหมดในไฟล์ให้ใช้รหัสนี้ด้านล่าง

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

 }
 

การใช้Fetch APIเป็นวิธีแก้ปัญหาที่ง่ายที่สุด:

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

มันทำงานได้สมบูรณ์แบบใน Firefox แต่ใน Chrome คุณต้องกำหนดการตั้งค่าความปลอดภัยเอง

ดังที่หลายคนพูดถึงก่อนหน้านี้สิ่งนี้ไม่สามารถใช้งานการโทร AJAX ได้ อย่างไรก็ตามมีวิธีรอบมัน ใช้องค์ประกอบอินพุตคุณสามารถเลือกไฟล์ของคุณ

ไฟล์ที่เลือก (.json) จำเป็นต้องมีโครงสร้างนี้:

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

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

จากนั้นคุณสามารถอ่านไฟล์โดยใช้ JS ด้วย 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);
});

คุณสามารถเข้าถึงไฟล์ในเครื่องของคุณได้ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์ของคุณ แต่สิ่งนี้อาจไม่ทำงานสำหรับผู้ใช้แอปทั้งหมดของคุณ

หากต้องการทำสิ่งนี้คุณสามารถลองทำตามคำแนะนำได้ที่นี่: http://www.html5rocks.com/en/tutorials/file/dndfiles/

เมื่อโหลดไฟล์แล้วคุณสามารถดึงข้อมูลโดยใช้:

var jsonData = JSON.parse(theTextContentOfMyFile);

หากคุณใช้ไฟล์ในเครื่องทำไมไม่เพียงแค่แพ็คข้อมูลเป็นวัตถุ js

data.js

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

ไม่มีXMLHttpRequestsไม่มีการแยกวิเคราะห์ใช้เพียงMyData.resourceโดยตรง

ง่ายมาก.
เปลี่ยนชื่อไฟล์ json ของคุณเป็น ".js" แทน ".json"

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

ดังนั้นให้ปฏิบัติตามรหัสของคุณตามปกติ

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

อย่างไรก็ตามสำหรับข้อมูลเนื้อหา json ของฉันมันดูเหมือน snip ด้านล่าง

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

คุณสามารถนำเข้าได้เหมือนโมดูล ES6;

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

เพียงแค่ใช้ $ .getJSON จากนั้น $ .each เพื่อทำซ้ำคู่คีย์ / ค่า ตัวอย่างเนื้อหาสำหรับไฟล์ JSON และรหัสการทำงาน:

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

คุณสามารถใช้วิธี 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();

คุณสามารถเห็นการตอบสนองของ myObj โดยใช้คำสั่ง console.log (ใส่ความเห็น)

หากคุณรู้จัก AngularJS คุณสามารถใช้ $ 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;
  };
}

หากคุณมีไฟล์ในโฟลเดอร์อื่นให้พูดถึงเส้นทางที่สมบูรณ์แทนชื่อไฟล์

เนื่องจากคุณมีเว็บแอปพลิเคชันคุณอาจมีไคลเอนต์และเซิร์ฟเวอร์

หากคุณมีเพียงเบราว์เซอร์ของคุณและคุณต้องการอ่านไฟล์ในเครื่องจากจาวาสคริปต์ที่ใช้งานในเบราว์เซอร์ของคุณนั่นหมายความว่าคุณมีลูกค้าเพียงคนเดียว เพื่อเหตุผลด้านความปลอดภัยเบราว์เซอร์ไม่ควรปล่อยให้คุณทำเช่นนั้น

อย่างไรก็ตามตามที่ lauhub อธิบายไว้ข้างต้นสิ่งนี้ดูเหมือนจะใช้ได้:

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

โซลูชันอื่น ๆ คือการติดตั้งที่ใดที่หนึ่งในเครื่องของคุณเว็บเซิร์ฟเวอร์ (เล็ก ๆ ใน windows หรือ monkey in linux) และด้วย XMLHttpRequest หรือ D3 ไลบรารี่ขอไฟล์จากเซิร์ฟเวอร์และอ่าน เซิร์ฟเวอร์จะดึงไฟล์จากระบบไฟล์ในเครื่องและให้บริการผ่านเว็บ

ฉันชอบสิ่งที่ Stano / Meetar แสดงความคิดเห็นข้างต้น ฉันใช้เพื่ออ่านไฟล์. json ฉันขยายตัวอย่างโดยใช้สัญญา นี่คือพลั่วเกอร์สำหรับเดียวกัน 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); 
       });

การอ่านของ JSON สามารถย้ายไปยังฟังก์ชั่นอื่นสำหรับ DRY; แต่นี่คือตัวอย่างของการจัดแสดงวิธีใช้สัญญา

คุณต้องสร้างอินสแตนซ์ XMLHttpRequest ใหม่และโหลดเนื้อหาของไฟล์ json

เคล็ดลับนี้ใช้ได้สำหรับฉัน ( https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-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);
 });

วิธีแก้ปัญหาง่ายๆอย่างหนึ่งคือการวางไฟล์ JSON ของคุณไว้ในเซิร์ฟเวอร์ที่รันอยู่ในเครื่อง สำหรับสิ่งนั้นจากเทอร์มินัลไปที่โฟลเดอร์โครงการของคุณและเริ่มเซิร์ฟเวอร์ท้องถิ่นบนหมายเลขพอร์ตบางตัวเช่น 8181

python -m SimpleHTTPServer 8181

จากนั้นเรียกดูhttp: // localhost: 8181 /ควรแสดงไฟล์ทั้งหมดของคุณรวมถึง JSON อย่าลืมติดตั้งหลามถ้าคุณยังไม่มี

หากคุณสามารถเรียกใช้เว็บเซิร์ฟเวอร์ในท้องถิ่น (ตามที่Chris Pแนะนำไว้ข้างต้น) และหากคุณสามารถใช้ jQuery ได้คุณสามารถลองhttp://api.jquery.com/jQuery.getJSON/

คุณสามารถใช้ D3 เพื่อจัดการการติดต่อกลับและโหลดไฟล์ JSON ในพื้นที่data.jsonดังต่อไปนี้:

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

ฉันได้รับคำตอบที่ยอดเยี่ยมของ Stanoและห่อไว้ในสัญญา สิ่งนี้อาจมีประโยชน์หากคุณไม่มีตัวเลือกเช่น node หรือ webpack เพื่อถอยกลับเพื่อโหลดไฟล์ json จากระบบไฟล์:

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

คุณสามารถโทรแบบนี้:

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

ดังนั้นหากคุณวางแผนที่จะใช้ "Apache Tomcat" เพื่อโฮสต์ไฟล์ JSON ของคุณ

1> หลังจากเริ่มต้นเซิร์ฟเวอร์ให้ตรวจสอบว่า Apache Tomcat ของคุณเปิดใช้งานแล้วโดยไปที่ URL นี้: "localhost: 8080" -

2> ถัดไปไปที่โฟลเดอร์ "webapps" - "มูลนิธิ C: \ Program Files \ Apache Software \ Tomcat 8.5 \ webapps" และสร้างโฟลเดอร์โครงการหรือคัดลอกโฟลเดอร์โครงการของคุณ

3> วางไฟล์ json ของคุณตรงนั้น

4> และนั่นคือมัน คุณทำเสร็จแล้ว! เพียงไปที่ - " http: // localhost: 8080 / $ project_name $ / $ jsonFile_name $ .json"