私の React の旅: 18 日目

JSON とデータ操作

JSON (JavaScript Object Notation) は、サーバーと Web アプリケーションの間でデータを交換するために使用される 軽量データ形式 です。これはさまざまなプログラミング言語で広くサポートされており、現代の Web 開発における重要なコンポーネントです。

JSON の主な特徴:
1.構造:

• データは、オブジェクト内のキーと値のペアとして、または値の配列として保存されます。
• 例 (オブジェクト):

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

• 例 (配列):

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

2.データ交換:

• JSON は、サーバーとクライアントの間でデータを送受信するためによく使用されます。

JSON と JavaScript 間の変換

1. JavaScript を JSON に変換する JSON.stringify() を使用して、JavaScript オブジェクトまたは配列を JSON 文字列に変換します。

例: JavaScript 配列から JSON へ

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

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

例: JavaScript オブジェクトから 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. JSON を JavaScript に変換
JSON.parse() を使用して、JSON 文字列を JavaScript オブジェクトまたは配列に変換します。

例: JSON 文字列を JavaScript 配列に変換

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

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

例: JSON 文字列を 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

JSON ファイルの取得と操作
JSON データは、サーバーまたはローカル ファイルから動的に取得して操作できます。

1. JSON ファイルを取得しています
fetch() API を使用して JSON データをリクエストします。

例: JSON ファイルを取得する

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

2. JSON データの反復
フェッチされた JSON がオブジェクトの配列である場合、.forEach() のようなメソッドを使用して各要素を反復処理できます。

例: フェッチされた JSON データの反復

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

アプリケーションでの JSON の使用例:
1.設定ファイル:

• JSON はアプリ設定 (config.json など) を保存するために使用されます。

2.API:

• REST API は通常、応答形式として JSON を返します。

3.データストレージ:

• 軽量データベース (Firebase、MongoDB など) は、JSON のような構造に依存しています。

4.データ交換:

• JSON は、フロントエンド と バックエンド 間の通信に使用されます。

反省

学んだこと:

• JavaScript オブジェクト/配列を JSON に、またはその逆に変換する方法。
• fetch() を使用して、外部ファイルまたは API から JSON データをリクエストします。
• .forEach() を使用して JSON データを反復処理します。

たとえ追加の規律が必要であっても、日々の成長は素晴らしいものです。

18日目は潰れました

以上が私の React の旅: 18 日目の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。