プレゼンテーションシナリオ: スライド136

スライド136では、JavaScript JSONについて説明します。

例 – JSON User List

説明:

JSON文字列には、キー"users"を持つオブジェクトが含まれ、その中には子オブジェクトの配列があります。各ユーザーにはnameとemailがあります。

JSON.parse() → JSON文字列をJSオブジェクトに変換してアクセスできるようにします。

例：data.users[0].name → "Alice"。

forEachを使用してusers配列を走査し、<li>リストを作成します。

innerHTMLを使用してUIを更新し、結果を表示します。

コード例:

// JSON string with array of user objects
let jsonString = `
{
    "users": [
        {"name":"Alice", "email":"alice@example.com"},
        {"name":"Bob", "email":"bob@example.com"},
        {"name":"Charlie", "email":"charlie@example.com"}
    ]
}
`;

// Convert JSON string → JavaScript object
let data = JSON.parse(jsonString);

// Build HTML List
let output = "";
data.users.forEach(user => {
    output += "<li>" + user.name + " - " + user.email + "</li>";
});

// Insert into <ul>
document.getElementById("userList").innerHTML = output;

以上で、JSONを使用してユーザーリストを保存および表示する方法の例についての説明を終わります。