Bagaimana cara membaca file JSON lokal eksternal dalam JavaScript?

Saya telah menyimpan file JSON di sistem lokal saya dan membuat file JavaScript untuk membaca file JSON dan mencetak data. Ini adalah file JSON:

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

Katakanlah ini adalah path dari file JSON: /Users/Documents/workspace/test.json.

Adakah yang bisa membantu saya dalam menulis sepotong kode sederhana untuk membaca file JSON dan mencetak data dalam JavaScript?

Anda tidak dapat membuat panggilan AJAX ke sumber daya lokal karena permintaan dibuat menggunakan HTTP.

Solusinya adalah dengan menjalankan server web lokal, sajikan file dan buat panggilan AJAX ke localhost.

Dalam hal membantu Anda menulis kode untuk membaca JSON, Anda harus membaca dokumentasi untuk jQuery.getJSON():

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

Untuk membaca file JSON lokal eksternal (data.json) menggunakan javascript, pertama buat file data.json Anda:

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

1. Sebutkan jalur file json di sumber skrip bersama dengan file javascript.

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

2. Dapatkan Objek dari file json

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

Untuk informasi lebih lanjut, lihat referensi ini .

Pemuatan .jsonfile dari harddisk adalah operasi asinkron dan oleh karena itu perlu menentukan fungsi callback untuk dieksekusi setelah file dimuat.

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

Fungsi ini berfungsi juga untuk memuat file .htmlatau .txt, dengan menimpa parameter tipe mime ke "text/html", "text/plain"dll.

Kapan di Node.js atau saat menggunakan require.js di browser , Anda bisa melakukannya:

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

Perhatikan: file dimuat sekali, panggilan selanjutnya akan menggunakan cache.

1. Pertama, buat file json. Dalam contoh ini file saya adalah 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. Dan di sini adalah kode saya yaitu, node.js. Perhatikan 'utf8'argumen untuk readFileSync: ini membuatnya mengembalikan bukan Buffer(walaupun JSON.parsebisa menanganinya), tetapi string. Saya membuat server untuk melihat hasilnya ...

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. Ketika Anda ingin membaca detail id tertentu, Anda dapat menyebutkan kode sebagai ..

 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. Ketika Anda memasukkan url karena localhost:3030/get/33akan memberikan detail terkait dengan id itu .... dan Anda juga membaca namanya. File json saya memiliki nama yang sama dengan kode ini, Anda bisa mendapatkan satu nama detail .... dan tidak mencetak semua nama yang sama

 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. Dan jika Anda ingin membaca detail nama simillar, Anda dapat menggunakan kode ini.

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. Jika Anda ingin membaca semua informasi dalam file kemudian gunakan kode ini di bawah ini.

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

 }
 

Menggunakan Fetch API adalah solusi termudah:

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

Ini berfungsi sempurna di Firefox, tetapi di Chrome Anda harus menyesuaikan pengaturan keamanan.

Seperti banyak orang sebutkan sebelumnya, ini tidak berfungsi menggunakan panggilan AJAX. Namun, ada cara mengatasinya. Menggunakan elemen input, Anda dapat memilih file Anda.

File yang dipilih (.json) harus memiliki struktur ini:

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

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

Kemudian Anda dapat membaca file menggunakan JS dengan 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);
});

Bergantung pada browser Anda, Anda dapat mengakses file lokal Anda. Tetapi ini mungkin tidak berfungsi untuk semua pengguna aplikasi Anda.

Untuk melakukan ini, Anda dapat mencoba instruksi dari sini: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Setelah file Anda dimuat, Anda dapat mengambil data menggunakan:

var jsonData = JSON.parse(theTextContentOfMyFile);

Jika Anda menggunakan file lokal, mengapa tidak hanya mengemas data sebagai objek js?

data.js

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

Tidak XMLHttpRequests , tidak ada parsing, cukup gunakan MyData.resourcelangsung

Sangat sederhana.
Ganti nama file json Anda menjadi ".js" sebagai gantinya ".json".

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

Jadi ikuti kode Anda secara normal.

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

Namun, hanya untuk informasi, konten json saya itu terlihat seperti snip di bawah ini.

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

Anda dapat mengimpornya seperti modul ES6;

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

Cukup gunakan $ .getJSON dan kemudian $ .each untuk mengulangi pasangan kunci / nilai. Contoh konten untuk file JSON dan kode fungsional:

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

Anda dapat menggunakan metode 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();

Anda dapat melihat respons myObj menggunakan pernyataan console.log (dikomentari).

Jika Anda tahu AngularJS, Anda dapat menggunakan $ 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;
  };
}

Jika Anda memiliki file di folder yang berbeda, sebutkan path lengkap bukan nama file.

Karena Anda memiliki aplikasi web, Anda mungkin memiliki klien dan server.

Jika Anda hanya memiliki browser, dan Anda ingin membaca file lokal dari javascript yang berjalan di browser Anda, itu berarti Anda hanya memiliki klien. Demi alasan keamanan, peramban seharusnya tidak membiarkan Anda melakukan hal itu.

Namun, seperti dijelaskan lauhub di atas, ini tampaknya berhasil:

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

Solusi lain adalah mensetup server web Anda di suatu tempat (kecil di windows atau monyet di linux) dan dengan pustaka XMLHttpRequest atau D3, minta file dari server dan baca. Server akan mengambil file dari sistem file lokal, dan menyajikannya kepada Anda melalui web.

Saya menyukai komentar Stano / Meetar di atas. Saya menggunakannya untuk membaca file .json. Saya telah memperluas contoh mereka menggunakan Janji. Berikut adalah penyedot untuk hal yang sama. 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); 
       });

Pembacaan JSON dapat dipindahkan ke fungsi lain, untuk KERING; tetapi contoh di sini lebih menunjukkan bagaimana menggunakan janji.

Anda harus membuat instance XMLHttpRequest baru dan memuat konten file json.

Tip ini berfungsi untuk saya ( 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);
 });

Salah satu solusi sederhana adalah dengan meletakkan file JSON Anda di dalam server yang berjalan secara lokal. untuk itu dari terminal buka folder proyek Anda dan mulai server lokal pada beberapa nomor port misalnya 8181

python -m SimpleHTTPServer 8181

Kemudian menjelajah ke http: // localhost: 8181 / akan menampilkan semua file Anda termasuk JSON. Ingatlah untuk menginstal python jika Anda belum memilikinya.

Jika Anda dapat menjalankan server web lokal (seperti disarankan Chris P di atas), dan jika Anda dapat menggunakan jQuery, Anda dapat mencoba http://api.jquery.com/jQuery.getJSON/

Anda bisa menggunakan D3 untuk menangani panggilan balik, dan memuat file JSON lokal data.json, sebagai berikut:

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

Aku mengambil jawaban Stano yang bagus dan membungkusnya dengan janji. Ini mungkin berguna jika Anda tidak memiliki opsi seperti node atau webpack untuk kembali memuat file json dari sistem file:

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

Anda bisa menyebutnya seperti ini:

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

Jadi, jika Anda berencana untuk pergi dengan "Apache Tomcat" untuk hosting file JSON Anda,

1> Setelah memulai server, pastikan Apache Tomcat Anda sudah aktif dan berjalan dengan membuka url ini: "localhost: 8080" -

2> Selanjutnya, buka folder "webapps" - "C: \ Program Files \ Apache Software Foundation \ Tomcat 8.5 \ webapps". Dan, buat folder proyek atau salin folder proyek Anda.

3> Rekatkan file json Anda di sana.

4> Dan itu saja. Kamu selesai! Cukup buka - " http: // localhost: 8080 / $ project_name $ / $ jsonFile_name $ .json"