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"
}
}
];
}
Video
Video does not exists.
