LWC: wire and getRecord, get field values

Question

It's crazy. I'm gonna crash the table. How to show variable {name} ?

Iterated component html:

<template>
    <p>{idx} </p>
</template>

Properly shows:

But When i try to add {name} to html it not works!

js code:

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
const FIELDS = [
    'Trip__c.Name',
    'Trip__c.Trip_Status__c'
];

export default class TripListItem extends LightningElement {
    @api idx; // got from parent component // works and displayed properly!

    @wire(getRecord, { recordId: '$idx', fields: FIELDS }) rec;

    get name() {
        return this.rec.data.fields.Name.value;
    }
}

Answer 1

Provisioning data via @wire is asynchronous. In your template you need to guard against this.rec.data being undefined which is the case until data is provisioned.

<template>
  <template if:true={rec.data}>
    {idx} {name}
  </template>
</template>

In your JavaScript add a getter for name.

import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
...
get name() {
  return getFieldValue(this.rec.data, ‘Trip__c.Name');
}

A functioning example using this pattern is https://github.com/trailheadapps/lwc-recipes/tree/master/force-app/main/default/lwc/wireGetRecordUser

Answer 2

works with:

const myfields = [
    'Trip__c.Name',
    'Trip__c.Trip_Status__c'
];

export default class TripListItem extends LightningElement {
    @api idx;
    @track error;
    @track name = '-';
    @track status = '-';
    @wire(getRecord, { recordId: '$idx', fields: myfields })
    wireRec({ error, data }) {
        if (error) {
            this.error = error;
        } else if (data) {
            this.name = data.fields.Name.value;
            this.status = data.fields.Trip_Status__c.value;
        }
    }
}

keep testing.

Answer 3

The issue was mostly because the get method would return undefined until the data is available via the wire method. So I modified the code and it worked.

import { LightningElement, api, wire, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
const FIELDS = [
    'Account.Name',
    'Account.CreatedDate'
];



export default class AccountsList extends LightningElement {

    @api recordId;
    @track error;
    @track name;
    @track account;


    @wire(getRecord, {recordId: '$recordId', fields:FIELDS})
    account;
    

    get something(){
        if(this.account.data){
            return this.account.data.fields.Name.value;
        }
        else{
            return '';
        }
    }

    get createdDate(){
        if(this.account.data){
            return this.account.data.fields.CreatedDate.value;
        }
        else{
            return '';
        }
    }


   

   
}