Bagaimana menggunakan file data json dalam javascript?

JSON adalah singkatan dari JavaScript Object Notion. Ini digunakan untuk berbagi data antara server dan klien. JavaScript memungkinkan kita memuat JSON lokal

Kami akan membahas cara memuat file JSON di artikel ini

Kami akan membaca file JSON berikut

"Students" : [
   {
      "firstName":"Ram","lastName":"Sharma"
   }
 ]
}

Gunakan Fungsi require()_ untuk Memuat File JSON di JavaScript

Dalam JavaScript, kita dapat menggunakan metode require()_ untuk memuat file dan modul. Ini mengambil jalur file lokal tempat file itu disimpan. Dengan bantuan fungsi console.log()_, ini memuat data di server dan menampilkannya

Misalnya,

const jsonData= require('./students.json'); 
console.log(jsonData);

Keluaran

"Students" : [
   {
      "firstName":"Ram","lastName":"Sharma"
   }
 ]
}

Gunakan Fungsi fetch()_ untuk Memuat File JSON di JavaScript

Fungsi ini mengambil file dari jalur penyimpanannya dan kemudian mengembalikan file sebagai respons di

const jsonData= require('./students.json'); 
console.log(jsonData);

Sebagian besar transaksi data antara klien dan server adalah JSON. Pada artikel ini, kita akan membahas 3 cara berbeda untuk membaca file JSON di JavaScript

JSON digunakan untuk menyimpan data secara terstruktur. Anda dapat menyimpan data pelanggan Anda dalam file JSON dan kemudian membacanya dalam JavaScript

File JSON dapat disimpan di server atau di klien. Kita akan melihat bagaimana membaca keduanya

Daftar isi

1. Menggunakan fetch() metode

Metode fetch() digunakan untuk mengirim dan menerima data dari server. Itu dapat digunakan untuk membaca file JSON yang disimpan di server atau di klien.

Ini adalah bagian inti dari JavaScript dan Anda tidak perlu mengimpor pustaka apa pun untuk menggunakannya

Sintaksis

fetch(url)

Di sini, url adalah URL file JSON. Ini bisa berupa file lokal atau file jarak jauh.

Metode fetch() mengembalikan objek Janji .

Ini adalah contoh yang berfungsi

Contoh

// read local JSON file in javascript
fetch("./lib/examples/employee.json")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })

Jalankan Di Sini

Tekan tombol jalankan dan Anda akan melihat bahwa file JSON diambil dan ditampilkan di konsol

Jika file JSON Anda ada di server jarak jauh maka Anda dapat mengikuti langkah yang sama, cukup berikan URL yang benar dari file JSON di fetch() method.

Contoh

// read remote JSON file in javascript
fetch("https://jsonplaceholder.typicode.com/users")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    for (let i = 0; i < data.length; i++) {
      console.log(data[i]);
    }
  })

Jalankan Di Sini

Contoh di atas akan mengambil data dari server jarak jauh dan menampilkannya di konsol

2. Menggunakan AJAX

AJAX digunakan untuk mengirim dan menerima data dari server. Anda dapat menggunakannya untuk meminta file JSON dari server dan server akan mengirimkan data file JSON kembali ke klien.

Catatan . AJAX hanya mendukung protokol http . Ini tidak akan berfungsi untuk file lokal. Untuk mendapatkan file lokal Anda perlu menjalankan server secara lokal dan Anda akan dapat mengakses file lokal.

Mari kita lihat bagaimana menggunakan AJAX untuk membaca file JSON di JavaScript

Contoh

// reading JSON file using AJAX

// create a new XMLHttpRequest object
var xhr = new XMLHttpRequest();

// open a connection
xhr.open("GET", "./lib/examples/employee.json", true);

// send the request
xhr.send();

// handle the response
xhr.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
}

Jalankan Di Sini

Kode dijelaskan

1. Buat objek XMLHttpRequest baru. Ini adalah objek yang akan digunakan untuk mengirim dan menerima data dari server.
2. Buka koneksi. Gunakan metode open() untuk membuka koneksi. Parameter pertama adalah jenis permintaan (GET atau POST). Parameter kedua adalah URL file (JSON di sini). Parameter ketiga adalah benar atau salah. Jika benar maka permintaan akan asinkron jika tidak maka akan sinkron.
3. Kirim permintaan. Gunakan metode send() untuk mengirim permintaan.
4. Tangani respons. Gunakan event onreadystatechange untuk menangani respons. Peristiwa onreadystatechange dipicu saat readyState berubah. readyState adalah angka dan dapat berupa salah satu dari nilai berikut.
   • 0 . permintaan tidak diinisialisasi
   • 1 . koneksi server terjalin
   • 2 . permintaan diterima
   • 3 . memproses permintaan
   • 4 . permintaan selesai dan respons sudah siap

3. Menggunakan jQuery

jQuery adalah pustaka JavaScript yang digunakan untuk membuat JavaScript lebih mudah digunakan. Ini menyediakan banyak metode berguna untuk membuat hidup Anda lebih mudah.

Untuk mendapatkan JSON Anda dapat menggunakan $. metode getJSON() yang menggunakan AJAX di belakang layar untuk mendapatkan file JSON dari server.

Karena menggunakan AJAX, ini tidak akan berfungsi untuk file lokal

Berikut adalah contoh kerja dari $. metode getJSON() .

Contoh

// read local JSON file using jQuery
$.getJSON("./lib/examples/employee.json", function (data) {
  console.log(data);
})

Jalankan Di Sini

Kesimpulan

Kami telah melihat 3 cara berbeda untuk membaca file JSON di JavaScript. Anda dapat menggunakan metode yang sama untuk membaca file XML juga dan melakukan sesuatu yang berguna

Bagaimana cara menggunakan data JSON dalam JavaScript?

Bagaimana cara membaca data dari file JSON di JavaScript?

Bagaimana cara menggunakan file JSON eksternal dalam JavaScript?

Bagaimana cara membaca data dari file JSON?