1

I have table which has I'm iterating the Above Response to display the data in Table Format.

Column 1 has Iteration Value Of timeSheetDate, Column 2 has nested data object as a fields.

In column 2 Each Row i have Plus button. On click it need to add new Row in same td.Baically need to Push the object in timesheetDetails for the Particular field.

Below Code throw's Uncaught TypeError: Cannot read property 'push' of undefined Error.

<table
                            class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered slds-border_left slds-border_right"
                            style="width: 50%;">
                            <thead>
                                <tr class="">
                                    <th class="" style="background: #03A9F4;" scope="col">
                                        <div class="slds-align_absolute-center slds-truncate slds-text-color_inverse"
                                            style="font-size: initial;" title="Time Sheet Date">
                                            Time Sheet Date</div>
                                    </th>
                                    <th class="" style="background: #03A9F4;" scope="col">
                                        <div class="slds-align_absolute-center slds-truncate slds-text-color_inverse"
                                            style="font-size: initial;" title="Regular">Time Sheet
                                            Details
                                        </div>
                                    </th>

                                </tr>
                            </thead>
                            <tbody>
                                <template for:each={timesheetDaysData} for:item="tsd" for:index="index">
                                    <tr class="slds-hint-parent" key={tsd.recId}>
                                        <th data-label={tsd.timeSheetDate} scope="row">
                                            <div class="slds-align_absolute-center slds-truncate"
                                                title={tsd.timeSheetDate}>
                                                {tsd.timeSheetDate}
                                            </div>
                                        </th>
                                        <td data-label="Time Sheet Details">



                                            <div class="slds-float_right slds-p-bottom_large">
                                                <lightning-button-icon icon-name="utility:add" title="Add TimeDetails"
                                                    variant="brand" icon-position="right" onclick={addNewTimeDetails}>
                                                </lightning-button-icon>
                                            </div>


                                            <template for:each={tsd.timesheetDetails} for:item="tsdtl"
                                                for:index="index">

                                                <div class="slds-grid" key={tsdtl.timeSheetDetailID}>
                                                    <div class="slds-col">
                                                        <span>
                                                            <lightning-combobox name="Project" label=""
                                                                value={tsdtl.projectName} placeholder="Select Project"
                                                                options={projectDataOptions}>
                                                            </lightning-combobox>
                                                        </span>
                                                    </div>
                                                    <div class="slds-col slds-p-left_x-small">
                                                        <span>
                                                            <lightning-combobox name="Type" label=""
                                                                value={tsdtl.timeSheetHoursType}
                                                                placeholder="Select Type" options={typeofHoursoptions}>
                                                            </lightning-combobox>
                                                        </span>
                                                    </div>
                                                    <div class="slds-col slds-p-left_x-small">
                                                        <span>
                                                            <lightning-input type="number" value={tsdtl.timeSheetHours}
                                                                placeholder="Hours" label=""></lightning-input>
                                                        </span>
                                                    </div>
                                                </div>
                                            </template>
                                        </td>

                                    </tr>
                                </template>
                            </tbody>
                        </table>
addNewTimeDetails(event) {
    this.timesheetDaysData.timesheetDetails.push({
      projectName: "",
      timeSheetDetailID: null,
      timeSheetHours: 0,
      timeSheetHoursType: ""
    });
    console.log("Enter ", this.timesheetDaysData);
  }

I'm returning the Response as Below fromthe Apex Controller.

[
    {
        "timeSheetDate": "May 11th",
        "timesheetDetails": [
            {
                "projectName": "",
                "timeSheetHours": 0,
                "timeSheetHoursType": ""
            }
        ]
    },
    {
        "timeSheetDate": "May 12th",
        "timesheetDetails": [
            {
                "projectName": "",
                "timeSheetHours": 0,
                "timeSheetHoursType": ""
            }
        ]
    },
    {
        "timeSheetDate": "May 13th",
        "timeSheetDateId": "a3P1I000000YANiUAO",
        "timesheetDetails": [
            {
                "projectName": "Emit CS Payroll",
                "timeSheetDetailID": "a3O1I000002IE6dUAG",
                "timeSheetHours": 4,
                "timeSheetHoursType": "Paid Time Off"
            },
            {
                "projectName": "Emit CS Payroll",
                "timeSheetDetailID": "a3O1I000002IE6YUAW",
                "timeSheetHours": 4,
                "timeSheetHoursType": "Billable Regular"
            }
        ]
    }

]



1

this.timesheetDaysData is an array not an object. So you will need to search the object item in using id or some other unique value. Then you will be able to update that.

so instead of

this.timesheetDaysData.timesheetDetails.push()

It should be

this.timesheetDaysData[index].timesheetDetails.push()

or

 let index = this.timesheetDaysData.findIndex(element => element.Id === event.target.dataset.id);
 this.timesheetDaysData[index].timesheetDetails.push();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.