0

I'm trying to implement a Google map using LWC, the component is on the record page called Project__c, I want to use Address__c as an input:

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import ADDRESS_FIELD from '@salesforce/schema/PRoject__c.Address__c';


export default class Map extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [ADDRESS_FIELD] })
    project;

    mapMarkers = [
        {
            location: {
                City: this.project.ADDRESS_FIELD.value,
                State: 'Norway',
            },
        },
    ];
    zoomLevel = 5;
}

When I open the record page I get the following error:

render threw an error in 'c:map' [Cannot read property 'ADDRESS_FIELD' of undefined]

The Project__c.Address__c is populated, so I'm not sure how to continue.

I tried replacing this.project.ADDRESS_FIELD.value with this.project.ADDRESS_FIELD but got the same results.

  • Do a console.log to this.project and see the structure it returns. – Raul May 27 '19 at 11:34
  • @Raul, when I add console.log('something'); I see the following error in VSC: 'unexpected token' - any thoughts ? – Json May 27 '19 at 11:36
  • 1
    Logging this.project will result in undefined - just as the error says. You may have a typo in import section. Is your SObject's API Name PRoject__c or Project__c? Can you also share some more code? – Bartosz Śliwiński May 27 '19 at 11:41
  • Changed PRoject__c to Project__c but still the same – Json May 27 '19 at 11:43
  • Can you share HTML code? – Bartosz Śliwiński May 27 '19 at 12:00
5

I think it is actually a timing issue - getRecord is an async operation, so you need the template to check for it before it renders - this works for me

<template>
    <template if:true={record}>
    <lightning-map
            map-markers={mapMarkers}>
    </lightning-map>
    </template>
</template>

//js controller

import { LightningElement, api, wire, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import ADDRESS_FIELD from '@salesforce/schema/Project__c.Address__c';

export default class StackExample extends LightningElement {
@track mapMarkers;
@track zoomLevel;
@track record;

    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [ADDRESS_FIELD] })
    wiredProject({ error, data }) {
        if (data) {
            this.record = data;
            console.log(JSON.stringify(this.record));
            this.mapMarkers = [
               {
                   location: {
                       Street: this.record.fields.Address__c.value,
                       City: 'Washington',
                       State: 'DC',
                   },
               },
           ];
           this.zoomLevel = 5;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.record = undefined;
        }
    }
}
| improve this answer | |
1

The line this.project.ADDRESS_FIELD.value is incorrect, the correct way would be

this.project.data.fields.fieldAPiname.value

ADDRESS_FIELD returns result like -> {fieldApiName: "FieldApi", objectApiName: "ObjApi"}

So you cannot use it in '.' reference.

Another way is

this.project.data.fields[ADDRESS_FIELD.fieldApiName].value

Or

You need to use getFieldValue.

Update your import statement as below

import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

Use below code to get field value

getFieldValue(this.record, field)
| improve this answer | |
  • Technically you are right but you can actually access the value of field by this.project.data.fields.Address__c.value but Json's issue is that this.project is undefined for some reason. Using getFieldValue method will result in similar error. – Bartosz Śliwiński May 27 '19 at 12:39
  • @BartoszŚliwiński the line this.project.ADDRESS_FIELD.value is incorrect – rahul gawale May 27 '19 at 12:41
  • @BartoszŚliwiński I have updated my answer with a detailed description – rahul gawale May 27 '19 at 12:49
  • yes, it is incorrect. But the issue doesn't lie in it but in undefined this.project. – Bartosz Śliwiński May 27 '19 at 13:01
1

I had similar situation. This did not work. if:true={contacts}

This worked. if:true={contacts.data}

| improve this answer | |

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.