3

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.

5
  • Do a console.log to this.project and see the structure it returns.
    – Raul
    May 27, 2019 at 11:34
  • @Raul, when I add console.log('something'); I see the following error in VSC: 'unexpected token' - any thoughts ?
    – Json
    May 27, 2019 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? May 27, 2019 at 11:41
  • Changed PRoject__c to Project__c but still the same
    – Json
    May 27, 2019 at 11:43
  • Can you share HTML code? May 27, 2019 at 12:00

3 Answers 3

11

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;
        }
    }
}
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)
4
  • 1
    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. May 27, 2019 at 12:39
  • @BartoszŚliwiński the line this.project.ADDRESS_FIELD.value is incorrect May 27, 2019 at 12:41
  • @BartoszŚliwiński I have updated my answer with a detailed description May 27, 2019 at 12:49
  • yes, it is incorrect. But the issue doesn't lie in it but in undefined this.project. May 27, 2019 at 13:01
1

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

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .