Bagaimana cara membaca file JSON lokal eksternal dalam JavaScript?


255

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?


Jawaban:


93

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/


2
Bisakah Anda membimbing saya bagaimana saya dapat menjalankan server lokal dalam kasus ini? Apa yang harus saya lakukan untuk menjalankan server lokal?
user2864315

2
Lingkungan apa yang Anda gunakan? Windows? Linux?
Chris Pickford

25
Ini hanya berlaku untuk AJAX: di bawah Chrome dan menggunakan File API HTML5, saya sudah melakukannya. Pertanyaannya tidak bertanya tentang AJAX.
lauhub

10
Jika Anda memasang python, Anda dapat menggunakan baris perintah python -m SimpleHTTPServer 8888dan buka http://localhost:8888/di browser Anda (Windows atau Mac). 8888adalah port dan dapat diubah.
geotheory

3
Untuk memperbarui komentar @ geotheory, dengan Python 3 perintahnya adalahpython -m http.server 8888
Marc Stober

193

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 .


8
Ini berfungsi jika Anda dapat memodifikasi file, atau jika file tersebut tidak memiliki JSON yang tepat sebagai isinya. Misalnya konten sampel untuk di data.jsonatas tidak lulus validasi: jsonlint.com karena ini benar-benar JavaScript. Menjatuhkan tanda kutip tunggal pembungkus akan mengubahnya menjadi JavaScript murni.
Jason Aller

3
Catatan: JSON.parse tidak didukung di beberapa browser yang lebih lama (melihat Anda IE). Lihat tabel Kompatibilitas Browser MDN untukwindow.JSON .
Sumner Evans

Seharusnya JSON.parse (data); tidak berfungsi karena data adalah string?
hubungi saya

261
Ini bukan jawaban yang benar. Contoh dalam jawaban tidak memuat file json. Ini sebenarnya hanya memuat file javascript lain yang menyimpan beberapa json hardcoded sebagai variabel bernama data. Jika Anda menghapus kutipan string dari sekitar json di data.json Anda bahkan tidak perlu menggunakan JSON.parse. Pertanyaannya adalah bagaimana cara memuat file JSON bukan bagaimana cara hardcode JSON ke file javascript lain dan kemudian memuatnya.
wuliwong

1
JSON.parse(window.data);akan memberikan informasi yang lebih baik scopedari datavariabel.
Akash

126

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.


14
Ini adalah praktik yang sangat buruk! Di Google Chrome, Anda tidak dapat membuat XmlHttpRequest ke sumber daya lokal.
mhaseeb

11
@ mhaseeb Anda dapat (bahkan sekarang, di masa depan), jika sumber daya memiliki domain / protokol yang sama dengan sistem yang meminta (yang ini akan, karena ini lokal). Cari CORS.
GreySage

11
saat mencoba ini dengan Chrome saat ini, saya mendapatkan "Permintaan lintas asal hanya didukung untuk skema protokol: http, data, chrome, ekstensi chrome, https." - jadi tidak ada protokol file, yang tersirat di sini @GreySage
eis

2
XMLHttpRequest.status mengembalikan nilai numerik. Ini hanya berfungsi karena javascript melakukan hal-hal di latar belakang untuk membuat kode Anda tidak mati. Harus dibaca sebagai berikut: rawFile.status === 200
user3044394

1
Anda juga dapat mengatur rawFile.responseType = 'json';agar ia mem-parsing objek json secara otomatis, pastikan untuk meneruskan rawFile.responsealih-alih rawFile.responseTextke callback.
Ignat


29
  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"}]

  1. 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());

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

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

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

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

 }
 


dari mana memerlukan () berasal? browser saya tidak dapat menemukannya
shieldgenerator7

membutuhkan () adalah fungsi bawaan. Menggunakan memerlukan () Anda dapat menyertakan modul yang ada di file terpisah. Fungsionalitas dasar dari mengharuskan adalah membaca file javascript, mengeksekusi file, dan kemudian melanjutkan untuk mengembalikan objek ekspor
Syed Ayesha Bebe

5
membutuhkan () dibangun ke Node.js, itu bukan bagian dari js asli
dementis

Jawaban ini tidak menunjukkan cara memuat file menggunakan Vanilla Javascript, tetapi bagaimana melakukannya menggunakan Node .js
Amos Long

18

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.


Ketika saya mencoba yang ini saya mendapat kesalahan berikut: (node: 2065) UnhandledPromiseRejectionWarning: Kesalahan: hanya url absolut yang didukung
Jangid

13


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

di mana Anda memasukkan nama file Anda?
shieldgenerator7

1
Dalam hal ini, pengguna harus memilih file sendiri karena kebijakan CORS, yang pada dasarnya mencegah pengembang halaman web dari mengambil data yang seharusnya tidak mereka lakukan (mis. Saya dapat mengambil file pribadi mereka, saya dapat membuat DAPATKAN permintaan ke skrip yang berpotensi buruk dan jalankan tanpa izin pengguna). Kebijakan CORS membuat masalah semacam ini sulit dihadapi tanpa backend, tapi itu membuat pengguna lebih aman. Jika Anda benar-benar ingin membuka file, Anda harus menjalankan server web yang dapat mengelola permintaan itu.
Sarah Cross

12

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

9

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


1
Oke, tapi tolong lengkapi bagian MyData.resource untuk javascript agar penggunaannya lebih jelas. Terima kasih.
Teluk

9

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"}]';

4
itu bukan file json - itu file JS.
Karpik

9

Anda dapat mengimpornya seperti modul ES6;

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

Lalu bagaimana Anda bisa mengimpor file json dinamis? Saya pikir Anda hanya dapat mengimpor file json hanya ketika Anda berada dalam mode pengembangan dengan metode Anda.
Berlian

Kamu benar. Saya hanya menjawab mempertimbangkan pertanyaan itu.
Serhan C.

6

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

3

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.


2

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.


1

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.


1

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

Masih bekerja pada Firefox tetapi tidak di Chrome: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. Anda bisa menggunakan json2js untuk mengonversi file JSON apa pun menjadi .JS.
lalengua

1

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.



-1

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>

-2

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

-4

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

masukkan deskripsi gambar di sini



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

masukkan deskripsi gambar di sini


3> Rekatkan file json Anda di sana. masukkan deskripsi gambar di sini



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


Tidak diminta untuk server TomCat
Chandra Kanth
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.