こんにちは、アンダーソンです。
以前やったlightning-datatableですが、今回はそちらを作成する際の
少しの注意点を書いていきたいと思います。
リレーションのデータについて
前回もご紹介しましたが、基本的には取得したデータや
表示させたいデータの項目名と、テーブルに使うカラムのfieldnameは
一致させないといけません。
例えば下記のような場合にはカラムに表示されないので注意です。
global with sharing class TestRecordController {
global TestRecordController() {}
@AuraEnabled(cacheable=true)
global static List<Test1__c> getRecord(){
return [
SELECT
Id,
Name,
Account__r.Name
FROM
Test1__c
LIMIT 1
];
}
}
import { LightningElement ,wire } from 'lwc';
import getRecord from '@salesforce/apex/TestRecordController.getRecord';
const COL = [
{ label: "Name" ,fieldName: "Name" },
{ label: "Account__r.Name" ,fieldName: "Account__r.Name" }
];
export default class DatatableCmp extends LightningElement {
columns = COL;
data =[];
async connectedCallback(){
const records = await getRecord();
this.data = records;
}
}
この場合、カラムはfieldName: “Account__r.Name”となっていますが、
実際に入ってきている値はAccount__cのためfieldName: “Account__c”と
変えてあげるとちゃんとIdが表示されます。

まあ、こんなのUI考えると全く意味ないですね。
取得したデータを入れ直す
では解決方法です。
wireで取得したデータを入れ直すことでこの問題は解決します。
非同期のconnectedCallbackの中でレコードを取得しているところを
下記のように変更します。
async connectedCallback(){
const records = await getRecord();
let assets = [];
records.forEach(record => {
let asset = {};
asset.Name = record.Name;
asset['Account__r.Name'] = record.Account__r.Name;
assets.push(asset);
});
this.data = assets;
}
こうしてあげることで渡ってきたrecordsを一つづつ格納し、
最終的に配列に入れ直すことで表示させることができます。
ここでJavaScriptのオブジェクトの書き方にも注意しないといけません。
asset.Account__r.Nameだとエラーになるので[]で囲むようにしておきましょう。
まとめ
ご存知の方にはなんだそんなことかよかもしれませんが、
VFに慣れている方にはわざわざそんなことしないといけないの?
と思うかもしれません。
こう言った書き方もしっかりマスターして
毎度つまづかないようにしていきたいですね。