Enable to iterate an array

Question

Hope you guys are safe and doing well.

I'm new to Salesforce Development and trying to iterate an array but enable to do it.

I want to display 7 input fields.

While opening the org I'm getting the following error

"Error during LWC component connect phase: [Cannot read properties of undefined (reading 'inputHours')]"

Here's my HTML Code

<div class="slds-form-element slds-var-p-around_small">
    <div class="slds-grid">
        <template for:each={projectHoursDatas} for:item="projectHoursData">
            <div class="slds-col slds-size_2-of-12" key={projectHoursData.id}>
                <b>{ projectHoursData.projectName }</b>
            </div>
            <template for:each={projectsHoursData.inputHours} for:item="inputHourValue">
                <div class="slds-col slds-size_1-of-12 slds-text-align_center" key={inputHourValue}>
                    <!-- <input type="text" class="slds-input" key={inputHourValue} /> -->
                    <span>{inputHours}</span>
                </div>
            </template>
            <div class="slds-col slds-size_1-of-12 slds-text-align_center" key={projectHoursData}>
                <p>00.00</p>
            </div>
        </template>
    </div>
</div>

and here's my JS Controller

import { LightningElement } from 'lwc';

export default class ManageTimesheet extends LightningElement {
    headers = [
        {
            day: 'Mo',
            date: '08 - 11'
        },
        {
            day: 'Tu',
            date: '09 - 11'
        },
        {
            day: 'We',
            date: '10 - 11'
        },
        {
            day: 'Th',
            date: '11 - 11'
        },
        {
            day: 'Fr',
            date: '12 - 11'
        },
        {
            day: 'Sa',
            date: '13 - 11'
        },
        {
            day: 'Su',
            date: '14 - 11'
        }
    ];

    projectHoursDatas = [
        {
            Id: 1,
            projectName: 'Project Timesheet 2021 - 2022',
            inputHours: [0, 0, 0, 0, 0, 0, 0]
        }
    ];

    enteredValues= [
        {
            Id: 1,
            hours: '00.00'
        },
        {
            Id: 2,
            hours: '00.00'
        },
        {
            Id: 3,
            hours: '00.00'
        },
        {
            Id: 4,
            hours: '00.00'
        },
        {
            Id: 5,
            hours: '00.00'
        },
        {
            Id: 6,
            hours: '00.00'
        },
        {
            Id: 7,
            hours: '00.00'
        }
    ];
}

Kindly Help!

Thanks in advance.

In your JSON inputHours is a string ('') while it should be an array [], that's why you cannot iterate over it. How do you retrieve projectHoursDatas? — RubenDG
– RubenDG, Commented Nov 11, 2021 at 11:51
@RubenDG It's actually an array I just mistyped it as a string. — Prince Sharma
– Prince Sharma, Commented Nov 11, 2021 at 12:06
@PrinceSharma you need to work more on your projects, working 0 hours each day will just not get it done... trust me, I've tried. :-) — David at Experance Partners
– David at Experance Partners, Commented Nov 11, 2021 at 12:17
I was just kidding, @PrinceSharma. Hope the answer below helps you — David at Experance Partners
– David at Experance Partners, Commented Nov 11, 2021 at 12:24

David at Experance Partners · Accepted Answer · 2021-11-11 13:55:16Z

Hope you are doing well also!

You have a couple of typos in your XML. They were hard to find since they were buried deep inside

<template for:each={projectsHoursData.inputHours} should be <template for:each={projectHoursData.inputHours}

and

<div class="slds-col slds-size_1-of-12 slds-text-align_center" key={projectHoursData}> should be

<div class="slds-col slds-size_1-of-12 slds-text-align_center" key={projectHoursData.id}>

How I found the errors is my suggestion:
Suggestion: Use generic element names in your iterators, like 'record' or 'item' - that way there is less likelihood of typos... and errors seem to stick out more.

So, when I did a find replace from 'projectHoursData' to 'record' the first issue didn't become 'record'. easy change. And the second issue stood out, why would 'record' alone be a key?

XML:

<template>
    <div class="slds-form-element slds-var-p-around_small">
        <div class="slds-grid">
            <template for:each={projectHoursDatas} for:item="record">
                <div class="slds-col slds-size_2-of-12" key={record.id}>
                    <b>{ record.projectName }</b>
                </div>
                <template
                    for:each={record.inputHours}
                    for:item="inputHourValue"
                >
                    <div
                        class="
                            slds-col
                            slds-size_1-of-12
                            slds-text-align_center
                        "
                        key={inputHourValue}
                    >
                        <input
                            type="text"
                            class="slds-input"
                            value={inputHourValue}
                        />
                        <span>{inputHours}</span>
                    </div>
                </template>
                <div
                    class="slds-col slds-size_1-of-12 slds-text-align_center"
                    key={record.id}
                >
                    <p>00.00</p>
                </div>
            </template>
        </div>
    </div>
</template>

Hope this helps!

FYI... if later you need to load data via @wired (or other async methods), you will need to add back in the `<template if:true={arrayName}' or you will get interesting results... also... consider a spinner to let the user know something is happening. Glad it works, good luck! — David at Experance Partners
– David at Experance Partners, Commented Nov 11, 2021 at 13:59
the values only need to be there if you have async, and depending on how you load the async data you may need a '@track' in front of the field. Glad it works for your current case! — David at Experance Partners
– David at Experance Partners, Commented Nov 11, 2021 at 14:22
Thank you so much for taking time out from your busy schedule and help me out. I'm glad your suggestions helped me. — Prince Sharma
– Prince Sharma, Commented Nov 11, 2021 at 17:51

Stack Exchange Network

Enable to iterate an array

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Enable to iterate an array

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions