function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Tyler Tran 94Tyler Tran 94 

Cannot read properties of undefined in LWC

Hi everyone! I have to get the response from an API Endpoint and display them in a data table (LWC). The response look like this: 
"list": [
        {
            "projectName": "Onnami",
            "point": {
                "min": 9.11,
                "max": 9.18,
                "default": 9.11
            }
        },
        {
            "projectName": "Sunshine INC",
            "point": {
                "min": 9.11,
                "default": 9.11
            }
        }
]
I got no problem when getting the "projectName", but when I try to get the "default" key in "point". I get the error: Uncaught (in promise) TypeError: LWC component's @wire target property or method threw an error during value provisioning. Original error:
[Cannot read properties of undefined (reading 'default')].
Here is my client side controller: 
import { LightningElement, api, wire } from 'lwc';
import getSubmissionRecords from '@salesforce/apex/SubmissionController.getSubmissionRecords';

const columns = [
    { label: 'Project Name', fieldName: 'projectName' },
    { label: 'Points', fieldName: 'point', type: 'number' },
    { 
        label: '', 
        fieldName: 'details', 
        type: 'url',  
        typeAttributes: {
            label: { 
                fieldName: 'detailName' 
            },
            target : '_blank'
        }},
];

export default class PricingTab extends LightningElement {
    @api recordId;
    @api columnData;

    @wire(getSubmissionRecords, { projectId: '$recordId' })
    returnedSubmissions({data, error}) {
        if(data) {
            let dataRefer = [];
            
            data.forEach((record) => {
                let preparedData = {};

                preparedData.projectName = record.projectName;
                preparedData.point = record.point.default;
                preparedData.detailName = 'Details';
                preparedData.details = 'https://google.com';

                dataRefer.push(preparedData);
            })

            this.columnData = dataRefer;
        }

        if(error) {
            console.log(error)
        }
    }
}

Here is the HTML file: 
<template>
    <lightning-datatable key-field="Id" data={columnData} columns={columns}></lightning-datatable>
</template>

The response returns about over 500 records.
Thank you so much!​​​​​
mukesh guptamukesh gupta
Hi Tyler,

FIrst you need to trace record,   use  console.log('record ==>>> '+JSON.stringify(record));


after that we will make sure about further action


 
mukesh guptamukesh gupta
Hi Tyler,

FIrst you need to trace record,   use  console.log('record ==>>> '+JSON.stringify(record));


after that we will make sure about further action


 
ravi soniravi soni
hi Tyler Tran 94,
I tried code in my side and I'm not able to get any error.
Here is my code you can compare it with your code. 
import { LightningElement, api, wire } from 'lwc';
//import getSubmissionRecords from '@salesforce/apex/SubmissionController.getSubmissionRecords';



const columns = [
    { label: 'Project Name', fieldName: 'projectName' },
    { label: 'Points', fieldName: 'point', type: 'number' },
    { 
        label: '', 
        fieldName: 'details', 
        type: 'url',  
        typeAttributes: {
            label: { 
                fieldName: 'detailName' 
            },
            target : '_blank'
        }},
];

export default class testLwc extends LightningElement {
@api recordId;
@api columnData;

    /*@wire(getSubmissionRecords, { projectId: '$recordId' })
    returnedSubmissions({data, error}) {
        if(data) {
            let dataRefer = [];
            
            data.forEach((record) => {
                let preparedData = {};

                preparedData.projectName = record.projectName;
                preparedData.point = record.point.default;
                preparedData.detailName = 'Details';
                preparedData.details = 'https://google.com';

                dataRefer.push(preparedData);
            })

            this.columnData = dataRefer;
        }

        if(error) {
            console.log(error)
        }
    }*/
    connectedCallback() {
        this.columns = columns;//Here is changes
       let data =  {"list": [
        {
            "projectName": "Onnami",
            "point": {
                "min": 9.11,
                "max": 9.18,
                "default": 9.11
            }
        },
        {
            "projectName": "Sunshine INC",
            "point": {
                "min": 9.11,
                "default": 9.11
            }
        }
]};

  let dataRefer = [];
            console.log('data====> ' + JSON.stringify(data));
            data.list.forEach((record) => {//Here is changes
                let preparedData = {};

                preparedData.projectName = record.projectName;
                preparedData.point = record.point.default;
                preparedData.detailName = 'Details';
                preparedData.details = 'https://google.com';

                dataRefer.push(preparedData);
            });
            console.log('dataRefer====> ' + JSON.stringify(dataRefer));

            this.columnData = dataRefer;
        }


    
}

I wrote comment in my code where I made changes. you can compare it and find your solution.
don't forget to mark it as the best answer if it helps you.
Thank you
Tyler Tran 94Tyler Tran 94
Hi guys, it's not worked for me at all.
As I mentioned, the response has about over 500 records, it takes several seconds to get the response (about 2-3 seconds). So do I need to add settimeout for the client side controller?