Lesson: 22 | JSON Multiple

HTML

<template>
    <div>
        <h1>Contact List</h1>
        <ul>
            <template for:each={contacts} for:item="contact">
                <li key={contact.email}>
                    <p>First Name: {contact.firstName}</p>
                    <p>Last Name: {contact.lastName}</p>
                    <p>Gender: {contact.gender}</p>
                    <p>Email: {contact.email}</p>
                    <p>Phone: {contact.phone}</p>
                    <p>Address:</p>
                    <ul>
                        <li>Street: {contact.address.street}</li>
                        <li>City: {contact.address.city}</li>
                        <li>State: {contact.address.state}</li>
                        <li>Zip: {contact.address.zip}</li>
                    </ul>
                </li>
            </template>
        </ul>
    </div>
</template>

Java Script

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    contacts = [
        {
            "firstName": "John",
            "lastName": "Doe",
            "gender": "Male",
            "email": "john.doe@example.com",
            "phone": "555-555-1212",
            "address": {
                "street": "123 Main St",
                "city": "Anytown",
                "state": "CA",
                "zip": "12345"
            }
        },
        {
            "firstName": "Jane",
            "lastName": "Doe",
            "gender": "Female",
            "email": "jane.doe@example.com",
            "phone": "555-555-1213",
            "address": {
                "street": "456 Oak St",
                "city": "Somecity",
                "state": "NY",
                "zip": "67890"
            }
        },
        {
            "firstName": "Bob",
            "lastName": "Smith",
            "gender": "Male",
            "email": "bob.smith@example.com",
            "phone": "555-555-1214",
            "address": {
                "street": "789 Elm St",
                "city": "Anothercity",
                "state": "FL",
                "zip": "54321"
            }
        }
    ];
}

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

Mastered by 6 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: 22 | JSON Multiple

HTML

Lightning Web Components