Saya telah menyelamatkan file JSON di sistem lokal dan menciptakan sebuah file JavaScript dalam rangka untuk membaca JSON file dan mencetak data. Berikut ini adalah file JSON:
{"resource":"A","literals":["B","C","D"]}
Mari kita mengatakan ini adalah path dari file JSON: /Pengguna/Dokumen/kerja/tes.json
.
Bisa tolong bantu saya menulis sepotong sederhana dari kode untuk membaca JSON file dan mencetak data di JavaScript?
Untuk membaca eksternal Lokal JSON file (data.json) menggunakan javascript, membuat data anda.file json:
data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';
var mydata = JSON.mengurai(data); alert(mydata[0].nama); alert(mydata[0].usia); alert(mydata[1].nama); alert(mydata[1].usia);
Untuk informasi lebih lanjut, lihat referensi.
Pemuatan .json
file dari harddisk adalah sebuah operasi asinkron dan dengan demikian perlu untuk menentukan fungsi callback untuk mengeksekusi 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 bekerja juga untuk loading .html
atau .txt file, dengan meng-jenis mime parameter
"text/html",
"text/plain"` dll.
Anda tidak membuat AJAX panggilan ke sumber daya lokal sebagai permintaan ini dibuat dengan menggunakan HTTP.
Solusi untuk menjalankan server web lokal, melayani up file dan membuat AJAX call ke localhost.
Dalam hal membantu anda menulis kode untuk membaca JSON, anda harus membaca dokumentasi untuk jQuery.getJSON()
:
[{"name":"ay","id":"533"},
{"name":"kiy","id":"33"},
{"name":"iy","id":"33"},
{"name":"iy","id":"3"},
{"name":"kiy","id":"35"},
{"name":"kiy","id":"34"}]
'utf8'
argumen readFileSync
: ini membuatnya kembali tidak Buffer
(meskipun JSON.mengurai
dapat menangani hal ini), tapi string. Saya membuat sebuah 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());
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");
});
localhost:3030/dapatkan/33
itu akan memberikan rincian yang terkait dengan id yang....dan anda membaca dengan nama juga. Saya json file yang telah identik dengan nama-nama dengan kode ini anda bisa mendapatkan satu nama rincian....dan itu didn't cetak semua nama 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");
});
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");
});
app.get('/all',sendAll);
function sendAll(request,response){
response.send(words);
}
Ketika di Node.js atau bila menggunakan require.js di browser, anda hanya dapat melakukan:
let json = require('/Users/Documents/workspace/test.json');
Catatan: file ini sarat sekali, panggilan berikutnya akan menggunakan cache.
Menggunakan Mengambil API adalah solusi termudah:
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
Bekerja sempurna di Firefox, tapi di Chrome anda harus menyesuaikan pengaturan keamanan.
Tergantung pada browser anda, anda dapat mengakses file lokal anda. Tapi ini mungkin tidak bekerja untuk semua pengguna aplikasi anda.
Untuk melakukan ini, anda dapat mencoba petunjuk berikut ini: http://www.html5rocks.com/en/tutorials/file/dndfiles/
Setelah file anda dimuat, anda dapat mengambil data dengan menggunakan:
var jsonData = JSON.parse(theTextContentOfMyFile);
Jika anda menggunakan file lokal, mengapa tidak hanya packade data sebagai obyek js?
data.js
MyData = { resource:"A",literals:["B","C","D"]}
Tidak ada XMLHttpRequests, tidak ada parsing, hanya menggunakan MyData.sumber daya
langsung
Sangat sederhana.
Mengubah nama file json ke ".js" bukan ".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, sekadar informasi, konten yang saya json itu's terlihat seperti snip di bawah ini.
contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';
Banyak orang-orang yang disebutkan sebelumnya, ini doesn't bekerja menggunakan AJAX call. Namun, ada's cara sekitar ini. 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);
});
Hanya menggunakan $.getJSON dan kemudian $.masing-masing untuk iterate pasangan Kunci /nilai. Isi contoh untuk file JSON dan fungsional kode:
{
{
"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 XMLHttpRequest() metode:
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 bisa melihat respon dari myObj menggunakan konsol.log pernyataan(komentar).
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 dalam folder yang berbeda, menyebutkan path lengkap, bukan nama file.
Karena anda memiliki aplikasi web, anda mungkin memiliki client dan server.
Jika anda hanya memiliki browser anda, dan anda ingin membaca file lokal dari javascript yang berjalan di browser anda, itu berarti bahwa anda hanya memiliki klien. Untuk alasan keamanan, browser tidak harus membiarkan anda melakukan hal seperti itu.
Namun, sebagai lauhub dijelaskan di atas, hal ini tampaknya bekerja:
http://www.html5rocks.com/en/tutorials/file/dndfiles/
Solusi lain adalah untuk men-setup di suatu tempat di mesin web server (kecil di windows atau monyet di linux) dan dengan XMLHttpRequest atau D3 perpustakaan, permintaan file dari server dan membacanya. Server akan mengambil file dari sistem file lokal, dan sajikan untuk anda melalui web.
Anda harus membuat new XMLHttpRequest contoh dan memuat isi dari file json.
Tip ini bekerja 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 untuk menempatkan file JSON di dalam lokal yang menjalankan server. untuk yang dari terminal pergi ke folder project anda dan mulai server lokal pada beberapa nomor port e.g 8181
python -m SimpleHTTPServer 8181
Kemudian browsing ke http://localhost:8181/ harus menampilkan semua file anda, termasuk JSON. Ingat untuk menginstal python jika anda don't sudah memiliki.
Saya menyukai apa yang Stano/Meetar komentar di atas. Saya menggunakannya untuk membaca .file json. Saya telah diperluas contoh-contoh mereka menggunakan Janji. Berikut ini adalah plunker 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);
});
Membaca JSON dapat dipindahkan ke fungsi lain, untuk KERING, tetapi contoh di sini adalah lebih banyak menampilkan cara menggunakan janji-janji.
Jika anda bisa menjalankan web server lokal (seperti Chris P yang disarankan di atas), dan jika anda bisa menggunakan jQuery, anda bisa mencoba http://api.jquery.com/jQuery.getJSON/
Anda bisa gunakan D3 untuk menangani callback, dan muatan lokal JSON file 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 Stano's jawaban yang sangat baik dan dibungkus dalam sebuah janji. Ini mungkin akan berguna jika anda don't memiliki pilihan seperti node atau webpack untuk jatuh kembali ke load json file 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 dapat menyebutnya seperti ini:
readFileP('<path to File>')
.then(d => {
'<do something with the response data in d.srcElement.response>'
});