de-vraag
  • Pertanyaan
  • Tag
  • Pengguna
Notifikasi
Imbalan
Registrasi
Setelah Anda mendaftar, Anda akan diberitahu tentang balasan dan komentar untuk pertanyaan Anda.
Gabung
Jika Anda sudah memiliki akun, masuk untuk memeriksa pemberitahuan baru.
Akan ada hadiah untuk pertanyaan, jawaban, dan komentar tambahan.
Lebih
Sumber
Sunting
 user2864315
user2864315
Question

Bagaimana untuk membaca eksternal lokal JSON file di JavaScript?

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?

209 2013-10-31T12:03:23+00:00 21
 user2864315
user2864315
Pertanyaan edit 14 Juli 2019 в 5:34
Pemrograman
javascript
json
Pertanyaan ini memiliki :value jawaban dalam bahasa Inggris, untuk membacanya masuk ke akun Anda.
 Ashfedy
Ashfedy
24 Juni 2014 в 4:47
2014-06-24T04:47:00+00:00
Lebih
Sumber
Sunting
#22677519

Untuk membaca eksternal Lokal JSON file (data.json) menggunakan javascript, membuat data anda.file json:

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';
  1. Menyebutkan path dari file json dalam naskah sumber bersama dengan file javascript.
<script type="text/javascript" src="data.json"></script> <script type="text/javascript" src="javascrip.js"></script>
  1. Mendapatkan Objek dari file json

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.

165
0
 Stano
Stano
3 Januari 2016 в 5:37
2016-01-03T17:37:32+00:00
Lebih
Sumber
Sunting
#22677521

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.

Billal Begueradj
Billal Begueradj
Jawaban edit 6 September 2018 в 10:36
111
0
Solution / Answer
Chris Pickford
Chris Pickford
31 Oktober 2013 в 12:05
2013-10-31T12:05:40+00:00
Lebih
Sumber
Sunting
#22677516

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():

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

jQuery.getJSON() | jQuery API Documentation
api.jquery.com
76
0
Syed  Ayesha Bebe
Syed Ayesha Bebe
2 Maret 2017 в 8:59
2017-03-02T08:59:49+00:00
Lebih
Sumber
Sunting
#22677524
  1. Pertama, buat sebuah file json. Dalam contoh ini file saya adalah kata-kata.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 berikut adalah kode saya.e,node.js. Catatan &#39;utf8&#39; 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());
  1. Bila anda ingin membaca id tertentu jelasnya anda bisa 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 masuk di url sebagai 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");

});
  1. Dan jika anda ingin membaca identik dengan nama rincian, 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 maka gunakan kode ini di bawah ini.
app.get('/all',sendAll);

 function sendAll(request,response){
 response.send(words);

 }
 Zelo101
Zelo101
Jawaban edit 15 Februari 2018 в 6:03
27
0
 musicformellons
musicformellons
11 Juli 2017 в 1:27
2017-07-11T13:27:49+00:00
Lebih
Sumber
Sunting
#22677525

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.

 musicformellons
musicformellons
Jawaban edit 22 Agustus 2019 в 5:48
17
0
Alex   Glinsky
Alex Glinsky
13 Juni 2018 в 10:59
2018-06-13T10:59:44+00:00
Lebih
Sumber
Sunting
#22677532

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.

Alex   Glinsky
Alex Glinsky
Jawaban edit 8 Juni 2019 в 10:29
Mozilla logo
developer.mozilla.org
13
0
 lauhub
lauhub
31 Oktober 2013 в 12:11
2013-10-31T12:11:51+00:00
Lebih
Sumber
Sunting
#22677518

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);
11
0
 user7394313
user7394313
9 Januari 2017 в 11:46
2017-01-09T11:46:41+00:00
Lebih
Sumber
Sunting
#22677523

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

Ali BAGHO
Ali BAGHO
Jawaban edit 8 September 2017 в 3:42
9
0
Antonio  Carlos Del Grande Juni
Antonio Carlos Del Grande Juni
21 Juni 2018 в 9:09
2018-06-21T21:09:14+00:00
Lebih
Sumber
Sunting
#22677533

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"}]';
8
0
Sarah Cross
Sarah Cross
30 Mei 2018 в 5:01
2018-05-30T17:01:19+00:00
Lebih
Sumber
Sunting
#22677531


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);
});
Franco Gil
Franco Gil
Jawaban edit 9 Mei 2019 в 8:17
7
0
Juan  Carlos Aviles Lazcano
Juan Carlos Aviles Lazcano
12 Maret 2019 в 5:31
2019-03-12T05:31:59+00:00
Lebih
Sumber
Sunting
#22677535

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)
            }
        })
    });
4
0
Maharshi Rawal
Maharshi Rawal
4 September 2017 в 7:34
2017-09-04T07:34:17+00:00
Lebih
Sumber
Sunting
#22677526

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.

3
0
 Antoni
Antoni
9 Mei 2015 в 8:39
2015-05-09T08:39:32+00:00
Lebih
Sumber
Sunting
#22677520

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.

2
0
 rodrigomelo
rodrigomelo
14 Maret 2018 в 11:33
2018-03-14T23:33:40+00:00
Lebih
Sumber
Sunting
#22677529

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);
 });
1
0
 ewalel
ewalel
14 April 2018 в 11:27
2018-04-14T11:27:05+00:00
Lebih
Sumber
Sunting
#22677530

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.

1
0
 Plankton
Plankton
5 Januari 2017 в 5:48
2017-01-05T05:48:07+00:00
Lebih
Sumber
Sunting
#22677522

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.

1
0
Serhan C.
Serhan C.
31 Agustus 2019 в 6:36
2019-08-31T18:36:42+00:00
Lebih
Sumber
Sunting
#22677536

Anda dapat mengimpor seperti ES6 modul;

import data from "/Users/Documents/workspace/test.json"
1
0
Nicolae Olariu
Nicolae Olariu
31 Oktober 2013 в 12:08
2013-10-31T12:08:26+00:00
Lebih
Sumber
Sunting
#22677517

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/

jQuery.getJSON() | jQuery API Documentation
api.jquery.com
0
0
 AlexG
AlexG
30 November 2017 в 7:47
2017-11-30T07:47:46+00:00
Lebih
Sumber
Sunting
#22677528

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>
0
0
 ewilan
ewilan
13 September 2018 в 3:48
2018-09-13T15:48:14+00:00
Lebih
Sumber
Sunting
#22677534

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>'
    });
-1
0
Related communities 1
JavaScript Indonesia
JavaScript Indonesia
14 549 pengguna
Grup JavaScript yang membahas JavaScript, framework JS, dan Node JS secara universal. Cek Pinned Message untuk keterangan lebih lanjut. Komunitas ReactJS: https://t.me/react_idn
Buka telegram
Tambahkan pertanyaan
Kategori
Semua
Teknologi
Budaya / Rekreasi
Kehidupan / Seni
Ilmu Pengetahuan
Profesional
Bisnis
Pengguna
Semua
Baru
Populer
1
UbiBot UK
Terdaftar 14 jam yang lalu
2
Галина Утяшова
Terdaftar 1 hari yang lalu
3
Asilbek Qadamboyev
Terdaftar 4 hari yang lalu
4
Akshit Mehta
Terdaftar 1 minggu yang lalu
5
me you
Terdaftar 1 minggu yang lalu
DA
DE
EL
ES
ET
FI
FR
ID
IT
JA
LV
NL
PT
RU
SL
TR
ZH
© de-vraag 2022
Sumber
stackoverflow.com
di bawah lisensi cc by-sa 3.0 dengan atribusi