【Lightning Web Component】lightning-datatableで参照項目を表示させる

こんにちは、アンダーソンです。
以前やった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に慣れている方にはわざわざそんなことしないといけないの？
と思うかもしれません。
こう言った書き方もしっかりマスターして
毎度つまづかないようにしていきたいですね。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。