My React Journey: Day 18

JSON and Data Manipulation

JSON (JavaScript Object Notation) is a lightweight data format used for exchanging data between a server and a web application. It is widely supported across different programming languages and is a key component in modern web development.

Key Features of JSON:
1.Structure:

• Data is stored as key-value pairs in an object or as an array of values.
• Example (Object):

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

• Example (Array):

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

2.Data Exchange:

• JSON is often used to send and receive data between a server and a client.

Converting Between JSON and JavaScript

1. Convert JavaScript to JSON Use JSON.stringify() to convert a JavaScript object or array into a JSON string.

Example: JavaScript Array to JSON

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

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

Example: JavaScript Object to 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. Convert JSON to JavaScript
Use JSON.parse() to convert a JSON string into a JavaScript object or array.

Example: 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

Example: JSON String to JavaScript Object

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

Fetching and Manipulating JSON Files
JSON data can be fetched and manipulated dynamically from a server or a local file.

1. Fetching JSON Files
Use the fetch() API to request JSON data.

Example: Fetch JSON File

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

2. Iterating Through JSON Data
If the fetched JSON is an array of objects, you can use methods like .forEach() to iterate through each element.

Example: Iterating Through Fetched JSON Data

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

Use Cases of JSON in Applications:
1.Configuration Files:

• JSON is used to store app settings (e.g., config.json).

2.APIs:

• REST APIs commonly return JSON as the response format.

3.Data Storage:

• Lightweight databases (e.g., Firebase, MongoDB) rely on JSON-like structures.

4.Data Interchange:

• JSON is used for communication between frontend and backend.

Reflection

What I Learned:

• How to convert JavaScript objects/arrays to JSON and vice versa.
• Using fetch() to request JSON data from an external file or API.
• Iterating through JSON data using .forEach().

Daily growth is sweet, even though it takes extra discipline.

Day 18 crushed

The above is the detailed content of My React Journey: Day 18. For more information, please follow other related articles on the PHP Chinese website!