Lesson: 21 | JSON Single

HTML

<template>
    <div>
        <p>Name: {myData.name}</p>
        <p>Age: {myData.age}</p>
        <p>Email: {myData.email}</p>
        <p>Address:</p>
        <ul>
            <li>Street: {myData.address.street}</li>
            <li>City: {myData.address.city}</li>
            <li>State: {myData.address.state}</li>
            <li>Zip: {myData.address.zip}</li>
        </ul>
        <p>Phone Numbers:</p>
        <ul>
            <template for:each={myData.phoneNumbers} for:item="phone">
                <li key={phone.type}>{phone.type}: {phone.number}</li>
            </template>
        </ul>
    </div>
</template>

Java Script

import { LightningElement } from 'lwc';

export default class JSONExampleSimple extends LightningElement {
    myData = {
        "name": "John",
        "age": 30,
        "email": "john@example.com",
        "address": {
            "street": "123 Main St",
            "city": "Anytown",
            "state": "CA",
            "zip": "12345"
        },
        "phoneNumbers": [
            {
                "type": "home",
                "number": "555-555-1234"
            },
            {
                "type": "work",
                "number": "555-555-5678"
            }
        ]
    };
}

Prev You need to login to have access to the quizzes.

Mastered by 0 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Login to your account

Lesson: 21 | JSON Single

HTML

Lightning Web Components