Perjalanan Reaksi Saya: Hari 18

JSON dan Manipulasi Data

JSON (Notasi Objek JavaScript) ialah format data ringan yang digunakan untuk bertukar-tukar data antara pelayan dan aplikasi web. Ia disokong secara meluas merentas bahasa pengaturcaraan yang berbeza dan merupakan komponen utama dalam pembangunan web moden.

Ciri Utama JSON:
1. Struktur:

• Data disimpan sebagai pasangan nilai kunci dalam objek atau sebagai tatasusunan nilai.
• Contoh (Objek):

{
  "name": "Damilare",
  "age": 30,
  "isEmployed": true,
  "hobbies": ["Singing", "Reading", "Coding"]
}

• Contoh (Array):

["Dee", "Fred", "Inioluwa", "Iteoluwa"]

2.Pertukaran Data:

• JSON selalunya digunakan untuk menghantar dan menerima data antara pelayan dan pelanggan.

Menukar Antara JSON dan JavaScript

1. Tukar JavaScript kepada JSON Gunakan JSON.stringify() untuk menukar objek atau tatasusunan JavaScript kepada rentetan JSON.

Contoh: Tatasusunan JavaScript ke JSON

const names = ["Dee", "Fred", "Inioluwa", "Iteoluwa"];
const jsonString = JSON.stringify(names);

console.log(names);       // Original JS array
console.log(jsonString);  // JSON string

Contoh: Objek JavaScript kepada JSON

const person = {
    name: "Damilare",
    age: 30,
    isEmployed: true,
    hobbies: ["Singing", "Reading", "Coding", "Helping"]
};
const jsonString = JSON.stringify(person);

console.log(person);      // Original JS object
console.log(jsonString);  // JSON string

2. Tukar JSON kepada JavaScript
Gunakan JSON.parse() untuk menukar rentetan JSON kepada objek atau tatasusunan JavaScript.

Contoh: JSON String to JavaScript Array

const jsonArray = `["Dee", "Fred", "Inioluwa", "Iteoluwa"]`;
const jsArray = JSON.parse(jsonArray);

console.log(jsonArray);   // JSON string
console.log(jsArray);     // JS array

Contoh: JSON String ke Objek JavaScript

const jsonObject = `{
    "name": "Damilare",
    "age": 30,
    "isEmployed": true,
    "hobbies": ["Singing", "Reading", "Coding", "Helping"]
}`;
const jsObject = JSON.parse(jsonObject);

console.log(jsonObject);  // JSON string
console.log(jsObject);    // JS object

Mengambil dan Memanipulasi Fail JSON
Data JSON boleh diambil dan dimanipulasi secara dinamik daripada pelayan atau fail setempat.

1. Mengambil Fail JSON
Gunakan API fetch() untuk meminta data JSON.

Contoh: Ambil Fail JSON

fetch("people.json")
    .then(response => response.json()) // Convert response to JS object/array
    .then(data => console.log(data));  // Log the JSON data

2. Mengulang Melalui Data JSON
Jika JSON yang diambil ialah tatasusunan objek, anda boleh menggunakan kaedah seperti .forEach() untuk mengulangi setiap elemen.

Contoh: Mengulang Melalui Data JSON yang Diambil

fetch("people.json")
    .then(response => response.json())
    .then(people => {
        people.forEach(person => {
            console.log(person.name); // Access properties of each object
        });
    });

Kes Penggunaan JSON dalam Aplikasi:
1.Fail Konfigurasi:

• JSON digunakan untuk menyimpan tetapan apl (cth., config.json).

2.API:

• API REST biasanya mengembalikan JSON sebagai format respons.

3.Storan Data:

• Pangkalan data ringan (cth., Firebase, MongoDB) bergantung pada struktur seperti JSON.

4.Pertukaran Data:

• JSON digunakan untuk komunikasi antara frontend dan backend.

Refleksi

Apa yang Saya Pelajari:

• Cara menukar objek/array JavaScript kepada JSON dan sebaliknya.
• Menggunakan fetch() untuk meminta data JSON daripada fail luaran atau API.
• Mengulang melalui data JSON menggunakan .forEach().

Pertumbuhan harian adalah manis, walaupun ia memerlukan disiplin tambahan.

Hari ke-18 hancur

Atas ialah kandungan terperinci Perjalanan Reaksi Saya: Hari 18. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!