0

I have a custom lwc component createContactWithApex which calls another component

 <c-child object-name="Contact" field-name="Name"
        label="Contact" parentidfield="ContactId"
        iconname="standard:contact">
 </c-child>

In the child.html - the childs's components' html file, I have the following code

 <template if:true={selectedRecord}>
      <input class="slds-input slds-combobox__input
                           slds-combobox__input-value" 
                           id="combobox-id-5" aria-controls="listbox-id-5" 
                           autocomplete="off" role="textbox" type="text" 
                           placeholder="Select an Option" readonly=""
                           value={selectedRecord.Name}
                           disabled
                           />
  <template if:true={selectedRecord}>

In the child.js - the childs's components' js file, I have the following code

import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = [
'Account.Id',
'Account.Name',
];

@api objectName = 'Account';
@api fieldName  = 'Name';
@api iconname   = 'standard:record';
@api label      = 'Account';
@api parentidfield = 'AccountId';

@wire(getRecord, { recordId: '0016F00002cy7eXQAQ', fields: FIELDS })
selectedRecord;

Here 0016F00002cy7eXQAQ is a valid AccountId

My expectation here is for the getRecord method to fetch the correct Account record using the recordId and fields and display it on the Child component on component load.

However, instead of the name of the Account getting printed, on child.html , it is coming as undefined in the UI.

I am not exactly sure if I am making any mistake in the wire method format.

1

You need to see the structure of the data recordApi is returning. If you'd look the data is actually inside fields property. You can access it like,

@track selectedRecord = { Id: { value: null }, Name: { value: null } };
  @wire(getRecord, { recordId: "0016F00002cy7eXQAQ", fields: FIELDS })
  selectedRecord;
  wiredAccount({ error, data }) {
    if (data) {
        this.selectedRecord = data.fields;
      }
    } else {
        this.error = error;
    }
  }

You can then access it like,

 <template>
    {selectedRecord.Name.value}
</template>
1
  • 1
    You are absolutely correct. I checked the JSOn format. It is in the format that you showed. However, I needed a different JSON format for UI display purposes. So, I created another variable with the correct JSON format. – Madhurima Dec 23 '20 at 10:42

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.