Lesson: 07 | Loop For In

HTML

<template>
    <lightning-card>

    <p>Before: {fruits.apple}</p>

        <button onclick={handleLoop}>Convert all the uppercase</button>

    <p>After: {fruitsUpperCase}</p>

    </lightning-card>    
</template>

Java Script

import { LightningElement } from 'lwc';

export default class ForInLoopExample extends LightningElement {
    fruitsUpperCase =[];
  
    fruits = {
    apple: 'red',
    banana: 'yellow',
    orange: 'orange',
    grape: 'purple',
  };

  handleLoop() {
    for (let fruit in this.fruits) {

        this.fruitsUpperCase = [ ...this.fruitsUpperCase, fruit.toUpperCase()];
    }
  }
}

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

Mastered by 11 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: 07 | Loop For In

HTML

Lightning Web Components